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前 端 科技 编著 
5 大 类 线 上 资源 海量 资源 ， 可 查 可 用 
人 @ 教 学 微 视频 ( 407 节 ) 生前 端 案例 资源 库 ( 4900 个 ) 
@ 拓 展 微 阅 读 ( 400 页 ) 人 @ 面 试题 库 ( 1036 道 ) 
@ 在 线 微 练习 ( 435 项 ) 人 @ 网 页 模板 库 ( 1500 套 ) 
人 @ 示 例 效果 (58 个 ) 全 设计 素材 库 ( 12000 个 ) 
人 @ 权 威 参 考 (5 个 ) 
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HTML5+CSS3+JavaScript 从 入 门 到 精通 
〈 微 课 精 编 版 ) 


前 端 科技 ”编著 


清华 大 学 出 版 社 
北 京 


内 容 简介 


《HTML5+CSS3+JavaScript 从 入 门 到 精通 〈 微 课 精 编 版 )》 从 初学 者 角度 出 发 ， 通 过 通俗 易 懂 的 语言 、 丰 富 
多 彩 的 实例 , 详细 介绍 了 HTML5+CSS3+JavaScript 前 端 开 发 技术 。 本 书 共 24 章 , 包括 HTMLS5 基础 , 新 建 HIML 
文档 ， 网 页 文本 和 版 式 ， 使 用 网 页 图 像 和 多 媒体 信息 ， 设 计 列表 和 超 链接 ， 设 计 表格 、 表 单 ，CSS3 基础 ， 使 用 
CSS3 美化 文本 、 图 像 、 列 表 、 超 链接 、 表 单 和 表格 ， 设 计 CSS3 伸缩 布局 、 响 应 布局 和 动画 ，JavaScript 基础 ， 
操作 DOM， 操 作 事件 ， 操 作 CSS 样式 ， 使 用 Ajax， 表 格 、 表 单 开 发 ， 综 合 实战 案例 等 内 容 。 书 中 所 有 知识 都 
结合 具体 实例 进行 介绍 ， 代 码 注释 详尽 ， 读 者 可 轻松 掌握 前 端 开发 技术 精髓 。 

除 纸 质 内 容 外 ， 本 书 还 配备 了 多 样 化 、 全 方位 的 学 习 资 源 ， 主 要 内 容 如 下 : 


407 节 同步 教学 微 视频 回 15000 项 设计 素材 资源 
400 页 拓展 知识 微 阅读 4800 个 前 端 开 发 案例 
876 个 实例 案例 分 析 48 本 权威 参考 学 习 手 册 
435 个 在 线 微 练习 1036 道 企业 面试 真题 


本 书 可 作为 前 端 开 发 ,移动 开发 入 门 者 的 自学 用 书 ,也 可 作为 高 等 院 校 及 培训 机 构 相 关 专业 的 教学 参考 用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ， 微 课 精 编 版 /前 端 科技 编著 . 一 北京 :清华 大 学 出 版 社 ，2018 
(清华 社 “ 视 频 大 讲堂 ”大 系 网 络 开发 视频 大 讲堂 ) 
ISBN 978-7-302-50220-3 
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如 何 使 用 本 书 


本 书 提供 了 多 样 化 、 全 方位 的 学 习 资 源 ， 帮 助 读者 轻松 掌握 HTML5+CSS3+JavaScript 技术 ， 从 
小 白 快速 成 长 为 前 端 开发 高 手 。 








| | 
前 端 开 发 百 问 百 答 和 | 
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纸 质 书 视频 讲解 小 白手 册 


手机 端 +PC 端 ， 线 上 线 下 同步 学 习 

1. 获取 学 习 权 限 

学 习 本 书 前 ， 请 先 乔 开 图 书 封底 的 二 维 码 涂 层 ， 使 用 手机 扫描 ， 即 可 解锁 本 书 资源 的 学 习 权限 。 
再 扫描 正文 章节 对 应 的 5 类 二 维 码 ， 可 以 观看 视频 讲解 ， 阅 读 线 上 资源 ， 体 验 示例 效果 ， 查 阅 权威 参 
考 资料 和 在 线 练习 提升 ， 全 程 易 懂 、 好 学 、 速 查 、 高 效 、 实 用 。 


副 开 涂 层 , 扫描 获取 学 习 权限 














2. 观看 视频 讲解 

对 于 初学 者 来 说 , 精彩 的 知识 讲解 和 透彻 的 实例 解析 能 够 引导 其 快速 入 门 , 轻松 理解 和 掌握 知识 
要 点 。 本 书 中 几乎 所 有 案例 都 录制 了 视频 ， 可 以 使 用 手机 在 线 观 看 ， 也 可 以 离线 观看 ， 还 可 以 推送 到 
电脑 上 大 屏幕 观看 。 


下 载 视频 至 手机 ， 
离线 流畅 观看 


推送 视频 至 邮箱 ， 
随时 PC 端 观 看 





Re A 从 入 门 到 精通 ( 微 神 精 编 版 ) 


3. 拓展 线 上 阅读 

一 本 书 的 厚度 有 限 ， 但 掌握 一 门 技术 却 需要 大 量 的 知识 积累 。 本 书 选择 了 那些 与 学 习 、 就 业 关系 
| 紧密 的 核心 知识 点 印 在 书 中 ， 而 将 大 量 的 拓展 性 知识 放 在 云 盘 上 ， 读 者 扫描 “ 线 上 阅读 ”二 维 码 ， 即 
| 可 免费 阅读 数 百 页 的 前 端 开发 学 习 资料 ， 获 取 大 量 的 额外 知识 。 


14.4.5 设计 伪 列 页 面 


在 设计 多 拉面 中 ， 由 于 每 个 人 上 高 上 不 一至， 共 目 内 容 帮 是 动 吉 且 示 ， 无 寺 囊 先 定义 。 这 桂 就 不 可 避免 地 册 现 栏目 
让 多 芝 不 天 的 项 象征 么 如 卫 让 备 个 柱状 高 度 攻 供 将 一 数 电 ? 

为 了 解决 这 个 和 要， 下 硬 从 细 两 和 广 法， 

方 于 一 ， 估 列 有 司法。 所 刘 作 局 法 ， 闵 是 设计 一 个 青果 图 像 ， 利 用 介 量 公交 并 所 共 目 的 宵 虹 例如， 以 上 示例 
寺 隐 为 基础， 使 用 Phasostop 设计 一 个 长 箱 的 月 六 图 ， 长 度 与 而 欠 讼 保 半 一致 高 度 任意 ， 和 图 B146 所 朱 
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uckereendanmageebg Bi semer mpesty。/ 信 列 和 其 图 各) 
为 了 亲朋 尼 色 的 和 拷 ， 不 妨 在 CSS 村 式 胡 中 区 除 人 景色 有 ， 这 村 所 得 的 数 季 如 胃 E14.7 所 示 ， 其 中 储 亲 一 个 人 
卓识 度 必 条 变化 ， 它 攻 人 漳 开 包 信 根 。 册 于 包含 杠 和 类 从 后 一 个 析 的 栏目 和 术 轩 聊 ， 所 以 就 给 人 一 种 科目 和 高 的 凡 党 。 














4. 进行 线 上 练习 
为 方便 读者 巩固 基础 知识 ,提升 实战 能 力 ， 本 书 附 赠 了 大 量 的 前 端 练习 题目 。 读 者 扫描 各 章 最 后 
的 “在 线 练习 ”二 维 码 ， 即 可 通过 反复 的 上 机 训练 加 深 对 知识 的 领悟 程度 。 
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保 在 二 维 码 , 在 PC 端 观看 电脑 、 平 板 、 手 机 
进行 练习 (参照 说 明 ) 端 不 同 的 显示 效果 


| 
| 对 于 前 端 设 计 、 开 发 来 说 ， 很 多 案例 效果 在 纸 质 书 上 是 无 法 得 到 完美 呈现 的 ， 如 动态 效果 、 绚 丽 
| 
| 


5. 观看 精彩 示例 效果 


| 页面 等 。 因 此 本 书 特意 提供 了 部 分 示例 效果 展示 。 读 者 扫描 案例 旁 的 “示例 效果 ”二 维 码 ， 即 可 在 学 
」 习 过 程 中 直观 感受 到 精彩 的 页 面 效果 。 







随 学 随 看 效果 
提高 学 习 兴 趣 
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6. 查阅 权威 参考 资料 


扫描 “权威 参考 ”二 维 码 ， 即 可 跳 转 到 对 应 知识 的 官方 文档 上 。 通 过 大 量 查 阅 ， 真 正 领悟 技术 内 
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7. 其 他 PC 端 资源 下 载 方式 
除了 前 面 介绍 过 的 可 以 直接 将 视频 、 拓 展 阅 读 等 
资源 获取 方式 。 
登录 清华 大 学 出 版 社 官方 网 站 (www.tup.com.cn),， 在 对 应 图 书页 面 下 查找 资源 的 下 载 方式 。 
申请 加 入 QQ 群 、 微 信 群 ， 获 得 资源 的 下 载 方式 。 
扫描 图 书 封底 二 维 码 〈 文 泉 云 盘 )， 获 得 资源 的 下 载 方式 。 





小 白 实 战 手册 


为 方便 读者 全 面 提升 ， 本 书 提供 了 4 本 小 白 学 习 手 册 : 前 端 开 发 百 问 百 答 、JavaScript 函数 编程 
基础 、JavaScript 面向 对 象 编程 以 及 实战 案例 手册 。 这 些 内 容 精 挑 细 选 ， 希 望 成 为 您 学 习 路 上 的 好 帮 


手 ， 关 键 时 刻 解 您 所 需 。 








资源 推送 到 邮箱 之 外 ， 还 提供 了 如 下 几 种 PC 端 


a A 从 入 门 到 精通 ( 微 课 精 编 县 


扫描 小 白手 册封 面 的 二 维 码 ， 可 在 手机 、 平 板 上 学 习 小 白手 册 内 容 。 


| sa | 








从 小 白 到 高 手 的 昱 变 


| 

| 

| 

| 

| 

| 

| 

谷歌 的 创始 人 拉 里 “ 佩 奇 说 过 ， 如 果 你 刻意 练习 某 件 事 超过 10000 个 小 时 ,那么 你 就 可 以 达到 世 
| 界 级 。 

| 因此 ,不 管 您 现在 是 怎样 的 前 端 开发 小 白 ， 只 要 您 按 着 下 面 的 步骤 来 学 习 ， 假 以 时 日 ， 您 会 成 为 
| 令 自 己 惊讶 的 技术 大 咖 。 

| (1) 扎实 的 基础 知识 + 大 量 的 中 小 实例 训练 + 有 针对 性 地 做 一 些 综合 案例 。 

| (2) 大 量 的 项 目 案例 观摩 、 学 习 、 操 练 ， 塑 造 一 定 的 项 目 思维 。 

| (3) 善于 借用 他 山 之 石 ， 对 一 些 成 熟 的 开源 代码 、 设 计 素材 拿 来 就 用 ， 学 会 站 在 巨人 的 肩膀 上 。 
(4) 有 功夫 多 参阅 一 些 官方 权威 指南 ， 拓 展 自己 对 技术 的 理解 和 应 用 能 力 。 

| (5) 最 为 重要 的 是 ， 多 与 同行 交流 ， 在 切磋 中 不 断 进步 。 

| 

| 

| 


书本 厚度 有 限 ， 学 习 空 间 无 限 。 纸 张 价格 有 限 ， 知 识 价值 无 限 。 和 希望 本 书 能 帮 您 真正 收获 学 习 的 
乐趣 和 知识 。 最 后 ， 祝 您 阅读 快乐 ! 
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Preface 


“网 络 开发 视频 大 讲堂 ”系列 从 书 于 2013 年 5 月 出 版 ， 因 其 编写 细腻 、 讲 解 透彻 、 实 用 易学 、 
配备 全 程 视频 等 ， 备 受 读者 欢迎 。 从 书 累计 销售 近 20 万 册 ， 其 中 ,《HTML5+CSS3 从 入 门 到 精通 》 


累计 销售 10 万 册 。 同 时 ， 系 列 书 被 上 百 所 高 校 选 为 教学 参考 用 书 。 


本 次 改版 ， 在 继承 前 版 优点 的 基础 上 ， 进 一 步 对 图 书 内 容 进 行 了 优化 ， 选 择 面试 、 就 业 最 急需 的 
内 容 ， 重 新 录制 了 视频 ， 同 时 增加 了 许多 当前 流行 的 前 端 技术 ， 提 供 了 “入 门 学 习 一 实例 应 用 一 项 目 


开发 一 能 力 测试 一 面试 ”等 各 个 阶段 的 海量 开发 资源 库 ， 实 战 容 量 更 大 ， 以 帮助 读者 快速 掌握 前 端 开 


发 所 需要 的 核心 精 血 内容。 


网 页 制作 技术 可 以 粗略 划分 为 前 台 浏览 器 端 技术 和 后 台 服务 器 端 技术 。 在 Web 标 准 中 ，HTML 负 
责 页 面 结构 ，CSS 负 责 样式 表现 ，JavaScript 负 责 动态 行为 。 


网 页 技术 层出不穷 ， 日新月异 , 但 有 一 点 是 肯定 的 : 不 管 是 采用 什么 技术 设计 的 网 站 ， 用 户 在 客 


户 端 通过 浏览 器 打开 看 到 的 网 页 都 是 静态 网 页 ， 都 是 由 HIML、JavaScript 和 CSS 技 术 构 成 的 。 因 此 ， 
HIML、CSS 和 JavaScript 技 术 是 网 页 制作 技术 的 基础 和 核心 。 


本 书 内 容 





HTML 


项 目 实战 


HTML5 网 页 设计 基础 
HTML 基本 语法 

使 用 标签 标识 网 页 内 容 
设计 标准 结构 


CSS 基本 语法 、 选 择 器 、 特 性 
美化 文本 和 图 像 

使 用 背景 图 像 和 渐变 背景 
美化 列表 和 超 链接 样式 
美化 表格 和 表单 样式 
排版 网 页 

设计 伸缩 布局 和 相应 布局 
设计 CSS 动画 


JavaScript 基本 语法 和 用 法 
操作 DOM 

事件 处 理 

操作 CSS 样式 

Ajax 应 用 
表格 和 表单 开发 





时 尚 购物 网 站 开发 ， 技 术 : 
HTML+CSS+JavaScripttjQuery 





知识 讲解 
示意 图 、 流 程 图 、 效 果 图 
精彩 实例 
拓展 微 阅读 
在 线 微 练习 
注意 、 提 示 、 说 明 
前 端 开 发 资源 库 








| 读者 对 象 


Usaressatguaanee 和 到 精 着 ( 稚 各 精 红 有) 


本 书 特 点 


1. 由 浅 入 深 ， 编 排 合 理 ， 实 用 易学 
本 书面 向 零 基础 的 初学 者 ， 通 过 “一 个 知识 点 + 一 个 例子 + 一 个 结果 + 一 段 评析 + 一 个 综合 应 用 ” 





| 的 写作 模式 ， 全 面 、 细 致 地 讲述 了 HTML5+CSS3+JavaScript 实 际 开发 中 所 需 的 各 类 知识 ， 由 浅 入 深 ， 


循序 渐进 。 同 时 ， 本 书展 示 了 许多 Web 时 代 备 受 欢迎 的 新 知识 ， 读 者 可 学 习 到 与 HTML5 相 关 的 一 些 
非常 实用 、 流 行 的 技术 。 

2.， 跟 着 案例 和 视频 学 ， 入 门 更 容易 

跟着 例子 学 习 ， 通 过 训练 提升 ， 是 初学 者 最 好 的 学 习 方式 。 本 书 案例 丰富 详尽 ， 多 达 800 多 个 ， 
且 都 附 有 详尽 的 代码 注释 及 清晰 的 视频 讲解 跟着 这 些 案例 边 做 边 学 , 可 以 避免 学 到 的 知识 流 于 表面 、 
限于 理论 ， 尽 情感 受 编程 带 来 的 快乐 和 成 就 感 。 

3. 5 大 类 线 上 资源 ， 多 元 化 学 习 体验 

为 了 传递 更 多 知识 ， 本 书 力求 突破 传统 纸 质 书 的 厚度 限制 。 本 书 提供 了 5 大 类 线 上 微 资源 ， 通 过 
手机 扫 码 , 读者 可 随时 观看 讲解 视频 ,拓展 阅读 相关 知识 ， 在 线 练习 强化 提升 ,还 可 以 欣赏 动态 案例 
效果 和 查阅 官方 权威 资料 ， 全 程 便捷 、 高 效 ， 感 受 不 一 样 的 学 习 体 验 。 

4. 精彩 栏目 ， 易 错 点 、 重 点 、 难 点 贴心 提醒 

本 书 根据 初学 者 特点 ， 在 一 些 易 错 点 、 重 点 、 难 点 位 置 精心 设置 了 “注意 ”提示 ”等 小 栏目 。 
通过 这 些小 栏目 ， 读 者 会 更 留心 相关 的 知识 点 和 概念 ， 绕 过 陷阱 ， 掌 握 很 多 应 用 技巧 。 


本 书 资源 





407 节 同 步 微 视频 
400 页 拓展 微 阅读 
876 个 实例 案例 分 析 


435 个 在 线 微 练习 
详尽 的 配 书 资源 | 一 |409 项 源 代码 资源 -|[ 快 加 掌握 前 端 开发 精髓 


入 诬 PSD 网 页 分 层 模板 〈426 套 ) 

门 设计 素材 大 全 (17 类 ，10000 个 ) 
网 页 配色 工具 箱 〈600 个 ) 

网 页 模板 大 全 (632 套 ) 

前 端 素材 库 JavaScript 网 页 特效 大 全 (24 套 ) 











Bootstrap 网 页 模板 (500 套 ) 拿 来 就 用 ， 提 升 速度 
训 | 提 Photoshop 设计 大 全 (18 类 ，2000 个 ) 
练 | 升 历史 经 典 网 页 欣赏 (508 例 ) 
vy 网 页 设计 初级 示例 大 全 (49 例 ) 


案例 资源 库 网 页 应 用 分 类 案例 大 全 (1600 例 ) 
HTML5+CSS3+JavaScript 实用 案例 大 全 
(3200 例 ) 专项 专 练 ， 身 经 百 战 


偶 攻 
PHP、MySQL 参考 手册 (5 册 ) 
9 本 CSS 参考 手册 
权威 参考 手册 10 本 HTML 参考 手册 拓宽 眼界 ， 提 升 内 功 





23 本 JavaScript 参考 手册 
个 . 1 本 Bhotoshop 学 习 手 册 
HTML、CSS 面试 题 (351 题 ) 
面试 题库 |JavaScript 面试 题 (685 题 ) 打造 超 强 就 业 能 力 


前 端 开发 /设计 面试 经 验 








回 “” 零 基础 的 编程 自学 者 。 


Vl: 





相关 培训 机 构 的 老师 和 学 生 。 
大 中 专 院 校 的 老师 和 学 生 。 
参加 毕业 设计 的 学 生 。 

初 、 中 级 程序 开发 人 员 。 


读 前 须知 


作为 入 门 书籍 ， 本 书 知识 点 比较 庞杂 ， 所 以 不 可 能 面面俱到 。 技 术 学 习 的 关键 是 方法 ， 本 书 在 很 
多 实例 中 体现 了 方法 的 重要 性 , 读者 只 要 掌握 了 各 种 技术 的 运用 方法 , 在 学 习 更 深入 的 知识 中 可 大 大 
提高 自学 的 效率 。 

本 书 提供 了 大 量 示例 ， 需 要 用 到 下 、Firefox、Chrome、Opera 等 主流 浏览 器 的 测试 和 预览 。 因 此 ， 
为 了 测试 示例 或 代码 ， 读 者 需要 安装 上 述 类 型 的 最 新 版 本 浏览 器 ， 各 种 浏览 器 在 CSS3 的 表现 上 可 能 
会 稍 有 差异 。 

限于 篇 幅 ， 本 书 示例 没有 提供 完整 的 HTML 代 码 ， 读 者 应 该 补充 完整 的 HTML 结 构 ， 然 后 进行 测 
试 练习 ， 或 者 直接 参考 本 书 提供 的 下 载 源 代码 ， 边 学 边 练 。 

为 了 给 读者 提供 更 多 的 学 习 资 源 ， 本 书 提供 了 很 多 参考 链接 , 许多 本 书 无 法 详细 介绍 的 问题 都 可 
以 通过 这 些 链接 找到 答案 。 由 于 这 些 链 接地 址 会 因 时 间 而 有 所 变动 或 调整 ， 所 以 在 此 说 明 ， 这 些 链接 
地 址 仅 供 参考 ， 本 书 无 法 保证 所 有 的 这 些 地 址 是 长 期 有 效 的 。 


读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 (需要 刊 开 涂 层 ) 获取 学 习 权 限 ， 然 后 即 可 免费 学 习 书 
中 的 所 有 线 上 线 下 资源 。 

本 书 所 附 赠 的 超 值 资源 库 内 容 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 (www.tup.com.cn) ， 在 对 应 图 
书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ”二 维 码 ， 获 取 其 下 载 方式 。 

本 书 提供 QQ 群 (668118468、697651657)、 微 信 群 (qianduankaifa_ cn)、 服务 网 站 (www. qianduankaifa. 
cn) 等 互动 渠道 ， 提 供 在 线 技 术 、 学 习 答 疑 、 技 术 资讯 、 视 频 课堂 、 在 线 勘 误 等 功能 。 在 这 里 ， 您 可 
以 结识 大 量 志同道合 的 朋友 ， 在 交流 和 切磋 中 不 断 成 长 。 

读者 对 本 书 有 什么 好 的 意见 和 建议 ， 也 可 以 通过 邮箱 (qianduanjiaoshi@163.com) 发 邮件 给 我 们 。 


关于 作者 


前 端 科技 是 由 一 群 热爱 Web 开 发 的 青年 骨干 教师 和 一 线 资深 开发 人 员 组 成 的 一 个 团队 , 主要 从 事 
Web 开 发 、 教 学 和 培训 。 参 与 本 书 编写 的 人 员 包 括 咸 建 勋 、 腾 晶 、 文 壮 、 李 静 、 钟 世 礼 、 囊 江 、 甘 桂 
萍 、 刘 燕 、 杨 凡 、 朱 砚 、 余 乐 、 分 仲 、 余 洪 平 、 谭 贞 军 、 谢 党 华 、 何 子夜 、 赵 美 青 、 牛 金 答 、 孙 玉 静 、 


回回 加 加 





左 超 红 、 薪 学 军 、 邓 才 兵 、 陈 文 广 、 李 东 博 、 林 友 赛 、 苏 震 岗 、 崔 鹏 飞 、 李 斌 、 郑 伟 、 邓 艳 超 、 胡 晓 | 





霞 、 朱 印 宏 、 刘 望 、 杨 艳 、 顾 克明 、 郭 靖 、 朱 育 贵 、 刘 金 、 吴 云 、 赵 德 志 、 张 卫 其 、 李 德 光 、 刘 坤 、 


彭 方 强 、 雷 海 兰 、 王 饱 铭 、 马 林 、 班 琦 、 蔡 起 英 、 曾 德 剑 等 。 
尽管 已 竭尽 全 力 ， 但 由 于 水 平 有 限 ， 书 中 下 漏 和 不 足 之 处 在 所 难免 ， 欢 迎 各 位 读者 朋友 批评 、 
指正 。 





编者 


2018 年 6 月 | 
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第 1 章 
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1.2 


13 


1.4 


| 
1.6 


第 2 章 


2.1 


2.2 


2.3 


HTML5 基础 
狠 和 视频 讲解 ，40 分 钟 
HTML 历史 … 
HTML 文档 结构 
1.2.1 HTML4 基本 结构 . 
1.2.2 XHTML 基本 结构 
1.2.3 HTMLS 基本 结构 . 
HTML 基本 语法 .. 
1.3.1 HTML4 语法 
1.3.2 XHTML 语法 
1.3.3 HTML5 语法 
案例 实战 
1.4.1 编写 第 一 个 HTML5 文档 ….…….11 
1.4.2 比较 HTML4 与 HTML5 

Ed 
扫 码 阅读 
在 线 练习 .… 


新 建 HTML5 文档 . 
名 4 视频 讲解 ，37 分 钟 


































定义 文档 视 口 … 
最 新 head 指南 .18 
移动 端 HIMLS head 头 部 信息 

i 
构建 网 页 通用 结构 .. 
2.2.1 定义 文档 结构 .… 
222 信用 二 V 和 呈 sD 
2.2.3 使 用 这 和 class.… 
构建 HTML5 新 结构 .… 
Eb 

















2.32 
233 
2.3.4 
23.5 
2.3.6 
.7 
2.3.8 


第 3 章 


3.1 结构 化 文本 .… 


3 
3.12 
3 
32 


3.2.6 
3.3 
3 
3.3.2 
333 
3.3.4 
和 3 
3.3.6 
337 


案例 实战 .. 
扫 码 阅读 .… 
在 线 练习 34 


功能 性 文本 


目 录 sy 


定义 主要 区 域 
定义 标题 栏 . 
定义 标题 组 . 




















定义 标题 文本 .. 
定义 段落 文本 .. 
定义 引用 文本 . 


定义 强调 文本 .. 
定义 格式 文本 .. 
定义 输出 文本 .… 
定义 缩写 文本 .. 
定义 插入 和 删除 文本 ， 
定义 文本 方向 …… 














定义 标记 文本 .. 
定义 进度 信息 
定义 刻度 信息 
定义 时 间 信 息 
定义 联系 文本 .. 











4.2 


4.3 


4.4 


4.5 






























































扫 码 阅读 .. 

在 线 练习 .. 

使 用 网 页 图 像 和 多 媒体 信息 .53 人 

鳃 a 视频 讲解 ，51 分 外 5.3.2 设计 快捷 分 享 命令 … 
5.3.3 设计 任务 列表 命令 … 
5.3.4 设计 排行 榜 列 表 结构 

2 5.3.5 设计 图 文 列表 栏目 

使 用 多 媒体 插件 2 

4.2.1 使 用 <embed> 标 签 第 6 设计 来 由 eo 99 

4.2.2 使 用 <object> 标 签 . 又 4 视频 讲解 : 24 分 钟 

使 用 HTMLS5 音频 和 视频 6.1 认识 表格 结构 . 

4.3.1 使 用 <audio> 标 签 ….. 6.2 

4.3.2 使 用 <video> 标 签 .. 6.2.1 定义 普通 表格 . 

案例 实战 .. 62 6.2.2 定义 列 标题 .… 

4.4.1 设计 图 文 新 闻 62 6.2.3 定义 表格 标题 . 

4.4.2 设计 阴影 白 边 66 6.2.4 表格 行 分 组 …. 

4.4.3 设计 音乐 播放 器 67 6.2.5 表格 列 分 组 . 

4.4.4 设计 视频 播放 器 69 6.3 设置 <table> 属 性 . 

HTML5 多 媒体 API.… 72 6.3.1 定义 单线 表格 . 

4.5.1 设置 属性 .. 6.3.2 定义 分 离 单元 格 . 

4.5.2 设置 方法 . 6.3.3 定义 细 线 边框 . 

3 放置 事 休 nis 6.3.4 添加 表格 说 明 . 

4.5.4 访问 多 媒体 属性 、 方 法 和 事件 ….72 6.4 设置 <tt> 和 <th> 属 性 .. 

在 线 练 本 5 击 6.4.1 定义 跨 单元 格 显示 

6.42 

人 ee 73 6 二 元 入 各 失 站 类 

新 建 列表 6.4.4 定义 信息 缩写 .…. 

Si 关 床 出 靳 6.4.5 单元 格 分 类 . 

5.1.2 有 序列 表 .. 

5.1.3 描述 列表 . 

5.1.4 

eH 





让 118 
66， 在 线 弥 于 eon 120 
5.2.3 定义 锚 点 链接 .… 是 二 重度 计 天 全 ash 121 
5.2.4 定义 目标 链接 合 i 视频 讲解 ，60 
7.1 





7.1.1 使 用 <form> 标 签 .. 





7.2 


3 


7.4 


Ts 


7.1.2 使 用 <input> 标 签 .… 
7.1.3 使 用 选项 控件 
7.1.4 使 用 辅助 控件 
设计 新 型 输入 框 -. 
7.2.1 定义 Email 框 … 
722 定义 URL 枢 : 
7.2.3 定义 数字 框 . 
7.2.4 定义 范围 框 . 
7.2.5 定义 日 期 选择 器 
7.2.6 定义 搜索 框 .. 
7.2.7 定义 电话 号 码 框 
7.2.8 定义 拾 色 器 .. 
设置 输入 框 属性 .. 
7.3.1 定义 自动 完成 … 
7.3.2 定义 自动 获取 焦 
7.3.3 定义 所 属 表单 … 
7.3.4 定义 表单 重 写 .… 
7.3.5 定义 高 和 宽 .. 
7.3.6 定义 列表 选项 
7.3.7 定义 最 小 值 、 最 大 值 和 步 长 
bb 
7.3.9 定义 匹配 模式 … 
7.3.10 定义 替换 文本 . 
7.3.11 定义 必 填 .… 
使 用 新 表单 对 象 . 
7.4.1 定义 数据 列表 
7.4.2 定义 密 钥 对 生成 器 
7.4.3 定义 输出 结果 .… 
设置 表单 属性 .…. 
7.5.1 定义 自动 完成 
7.5.2 定义 禁止 验证 





























































名 4 视频 讲解 : 6 分 钟 









8.2.1 首页 分 析 .. 50 
8.2.2 ”构建 网 页 标题 51 
8.2.3 ”构建 侧 边栏 .. .152 


8.3 
8.4 


第 9 章 


人 1 
9.2 


3 


9.4 


5 
9.6 


全 了 


9.8 


第 10 章 


10.1 


目 录 


8.2.4 构建 主体 内 容 . 
8.2.5 构建 版 权 信 息 . 
设计 详细 页 . 









CSS3 基 确 必 ee 160 
鳃 4 视频 讲解 ，61 分 钟 

CSS 历史 . 
初 用 CSS . 
9.2.1 CSS 样式 .… 
9.2.2 引入 CSS 样式 
9.2.3 CSS 样式 表 .… 
9.2.4 导入 外 部 样式 表 .… 
9.2.5 CSS 格式 化 . 
9.2.6 CSS 属 性 ..… 
9.2.7 CSS 属性 值 . 
9.3.1 标签 选择 器 . 
9.3.2 类 选择 器 . 
9.3.3 ID 选择 器 .… 
9.3.4 通 配 选 择 器 . 
关系 选择 器 
9.4.1 包含 选择 器 . 
9.4.2 
9.43 
9.4.4 
9.4.5 




























9.6.1 结构 伪 类 . 
9.6.2 否定 伪 类 . 
9.6.3 ”状态 伪 类 . 
9.6.4 目标 伪 类 . 





9.7.1 CSS 继承 性 . 
9.7.2 CSS 层 司 性 . 


在 线 练习 
使 用 CSS3 美化 网 页 文本 和 图 像 .…185 


医 4 视频 讲解 ，112 分 钟 
设计 字体 样式 … 

















& Hiressstyussnp 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


10.2 


10.3 


10.4 


































10.1.1 定义 字体 类 型 . .186 
10.1.2 定义 字体 大 小 . .187 
10.1.3 定义 字体 颜色 ..187 
10.1.4 定义 字体 粗细 . ig 
10.1.5 定义 艺术 字体 . .188 
10.1.6 定义 修饰 线 .… 

10.1.7 定义 字体 的 变 体 . 

10.1.8 定义 大 小 写字 体 . 

设计 文本 样式 

10.2.1 定义 文本 对 齐 . 

10.2.2 定义 垂直 对 齐 . 92 
10.2.3 定义 文本 间距 . 

10.2.4 ”定义 行 高 .… 93 
10.2.5 定义 首 行 缩 进 . 94 
设计 图 像样 式 

10.3.1 定义 图 像 大 小 . 


10.3.2 定义 图 像 边框 . 
10.3.3 定义 不 透明 度 . 
10.3.4 定义 圆 角 特效 . 
10.3.5 定义 阴影 特效 . 
案例 实战 
10.4.1 设计 文本 阴影 . 
10.4.2 ”控制 文本 溢出 . 
10.4.3 ”控制 文本 换行 . 
10.4.4 设计 动态 内 容 . 
10.4.5 设计 个 性 字体 … 
10.4.6 设计 正文 版 式 1.. 
10.4.7 设计 正文 版 式 2.. 
10.4.8 设计 正文 版 式 3.. 了 
10.4.9 设计 正文 版 式 4 
在 线 练习 2j15 


使 用 CSS3 背景 图 像 和 渐变 背景 ……216 
占 1 视频 讲解 ，51 分 钟 

设计 背景 图 像 … 
11.1.1 设置 背景 图 像 . 
11.1.2 设置 显示 方式 . 
11.1.3 设置 显示 位 置 . 
11.1.4 设置 固定 背景 . 
11.1.5 设置 定位 原点 . 
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12. 


12.2 


12.3 ”案例 实战 


11.1.6 设置 裁剪 区 域 …- 
11.1.7 设置 背景 图 像 大 小 . 
11.1.8 设置 多 重 背 景 图 像 . 
设计 渐变 背景 ……………. 
11.2.1 定义 线性 渐变 .… 
11.2.2 ”设计 线性 渐变 样式 . 
11.2.3 定义 重复 线性 渐变 . 
11.2.4 定义 径 向 渐变 
11.2.5 设计 径 向 渐变 样式 . 
11.2.6 定义 重复 径 向 渐变 . 
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设计 条 纹 背 景 
设计 网 页 背景 色 . 
设计 图 标 .…………… 
特殊 渐变 应 用 场景 . 
设计 折 角 栏目 
11.3.6 设计 优惠 券 … a 
2 ey 


使 用 CSS3 美化 列表 和 超 链接 








设计 超 链 接 样式 .… 
12.1.1 使 用 动态 伪 类 
12.1.2 定义 下 划 线 样式 . 
12.1.3 定义 特效 样式 ..… 
12.1.4 定义 光标 样式 
设计 列表 样式 
12.2.1 定义 项 目 符号 类 型 . 
12.2.2 定义 项 目 符号 图 像 . 
12.2.3 ”模拟 项 目 符号 









12.3.1 
12.3.2 
只 33 
12.3.4 
12.3.5 
12.3.6 
12.3.7 


设计 图 形 按钮 链接 . 
设计 背景 滑动 样式 . 
设计 背景 交换 样式 . 
设计 水 平滑 动 菜单 . 
设计 垂直 滑动 菜单 . 
设计 Tab 选项 面板 . 
设计 下 拉 式 面板 .…. 
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第 13 章 使 用 CSS3 美化 表格 和 表单 样式 .267 
如 视频 讲解 ，44 
设计 表格 样式 … 
13.1.1 定义 边框 样式 . 
13.1.2 定义 单元 格 间距 . 
13.1.3 定义 标题 位 置 … 
13.1.4 隐藏 空 单元 格 . 
13.2 ”设计 表单 样式 … 
13.2.1 定义 文本 框 样式 . 
13.2.2 定义 单 选 按钮 和 复 选 框 样式 
13.2.3 定义 选择 框 样式 
13.3 ”案例 实战 
13.3.1 设计 细 线 表格 . 
13.3.2 设计 斑马 线 表格 …. 
13.3.3 设计 结构 样式 表格 . 
13.3.4 设计 登录 表单 . 
13.3.5 设计 搜索 表单 . 
13.3.6 设计 联系 表单 . 
13.4 设计 表格 特殊 样式 
13.4.1 表格 布局 特性 …… 
13.4.2 定义 列 组 和 行 组 样 
13.4.3 表格 结构 的 层 登 顺序 
在 线 练习 … 


第 14 章 使 用 CSS3 排版 网 页 291 
央视 频 讲 解 ，55 分钟 

CSS 盒 模型 
14.1.1 认识 display 
14.1.2 认识 CSS 金 模型 
人 和 交办 
14.1.4 定义 边框 … 
14.1.5 定义 补 白 
设计 浮动 显示 .… 
14.2.1 定义 float... 
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13.1 


































13.5 


14.1 














14.2 














14.3 ”设计 定位 显示 .… ..302 
14.3.1 定义 positioi 
14.3.2 设置 层 登 顺序 . 





14.4 ”案例 实战 村 
14.4.1 设计 两 栏 页 面 .ee 





14.4.2 
14.4.3 
14.4.4 


设计 三 栏 页 面 .… 
设计 居中 网 页 … 
设计 定位 页 面 … 

14.4.5 设计 擅 列 页 面 … 

14.4.6 ”设计 浮动 页 面 
14.5 ” 扫 码 拓展 阅读 
0 922 


第 15 章 设计 CSS3 伸缩 布局 和 响应 布局 … 
名 1 视频 讲解 ，37 分 钟 
市 

15.1.1 设置 列 宽 … 

15.1.2 设置 列 数 … 

15.1.3 设置 间距 .… 

15.1.4 设置 列 边框 

15.1.5 设置 跨 列 显示 

15.1.6 设置 列 高 度 .… 

15.2 ”新 版 伸缩 盒 

15.2.1 认识 Flexbox . 
15.2.2 ”启动 伸缩 使 
15.2.3 设置 主轴 方向 
15.2.4 设置 行 数 .… 
15.2.5 设置 对 齐 方式 
15.2.6 设置 伸缩 项 目 .… 
15:3 
15.3.1 认识 @media.. 
15.3.2 使 用 @media.. 
15.4 ”案例 实战 
15.4.1 设计 三 栏 伸缩 页 面 . 
15.4.2 设计 自 适 应 页 面 
15.4.3 设计 响应 式 页 面 . 
15.4.4 设计 响应 式 菜单 . 


15.1 
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第 16 章 设计 CSS3 动画 
名 "视频 讲解 ，45 分 钟 

入 计 苞 形 动 而 oii 
16.1.1 设置 变形 原点 
16.1.2 定义 2D 旋转 . 
16.1.3 定义 2D 缩放 . 
16.1.4 定义 2D 平移 . 


16.1 











oo、 








第 17 章 ， JavaScript 基础 . 


> 
16.1.5 


16.1.6 
16.1.7 


定义 也 倾斜 … 
定义 2D 算 阵 .. 
定义 3D 平 移 .. 
16.1.8 定义 3D 缩放 .. 
16.1.9 定义 3D 旋转 .. 
16.2 ”设计 过 渡 动画 … 
16.2.1 设置 过 渡 属 性 . 
16.2.2 设置 过 渡 时 间 
16.2.3 设置 延迟 过 渡 时 间 
16.2.4 设置 过 渡 动画 类 型 . 
16.2.5 设置 过 渡 触 发 动作 . 
16.3 ”设计 帧 动画 
16.3.1 设置 关键 帧 …. 
16.3.2 设置 动画 属性 . 
16.4 ”案例 实战 
16.4.1 设计 动画 菜单 . 
16.4.2 绘制 3D 金子 . 
16.4.3 设计 旋转 的 3D 侈 子 
16.4.4 设计 折 沾 面板 . 
16.5 在 线 练习 


























锅 i 视频 讲解 ，171 
17.1 JavaScript 历史 
17.2 在 网 页 中 使 用 JavaScript .… 

17.2.1 编写 脚本 . 

17.2.2 ”脚本 位 置 . 

17.2.3 ”脚本 基本 规范 . 
17.3 ”使 用 变量 .… 

17.3.1 声明 变量 . 下 

1732 教 据 类 型 .376 
17.4 使 用 运算 符 和 表达 式 
17.5 ”使 用 语句 

17.5.1 表达 式 语句 和 语句 块 . 

17.5.2 条 件 语句 .………… 了 

17.5.3 ”循环 语句 

17.5.4 跳 转 语句 . 
17.6 ”使 用 函数 

17.6.1 定义 函数 . 

17.6.2 ”调用 函数 . 




























7.7 


17.9 


17.6.3 ”函数 参数 
使 用 对 象 

17.7.1 创建 对 象 
17.7.2 访问 对 象 


17.8.1 定义 数组 
17.8.2 存 取 元 素 
i 3 
案例 实 坪 nie 
17.9.1 使 用 constructor 检测 

使 用 toString 检测 数据 类 型 

引用 类 型 转换 
转换 为 字符 囊 
转换 为 数字 … 
转换 为 布尔 值 
17.9.8 ”强制 转换 …………… 
17.9.9 使 用 Arguments 对 象 . 
17.9.10 使 用 cal0 和 apply0. 
17.9.11 使 用 this.… 
17.9.12 ”函数 调用 模式 














17.92 
17.93 
17.9.4 
795 
17.9.6 
17.9.7 
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18.1 


18.2 


18.3 


人 有 
名" 视频 i 
使 用 节点 
18.1.1 节点 类 型 
18.1.2 节点 名 称 和 值 
18.1.3 访问 节点 … 
18.1.4 编辑 节点 
使 用 文档 
18.2.1 访问 文档 子 节 ， 
18.2.2 访问 文档 信息 
18.2.3 访问 文档 元 素 
18.2.4 访问 文档 集合 
使 用 元 素 
18.3.1 访问 元 素 
18.3.2 创建 元 素 
18.3.3 复制 元 素 


















18.3.4 插入 元 素 .… 19.2.8 禁止 表单 提交 .… 











18.3.5 删除 元 素 .… 19.2.9 分 享 选中 文本 … Ee 

18.3.6 ”替换 节点 .... 193 1 aa 

37 区 了 本 二 第 20 章 操作 CSS 样式. 
作用 站 名 1 视频 讲解 ，45 分 钟 


18.4.1 访问 文本 
18.4.2 创建 文本 .… 
18.4.3 编辑 文本 .… 
18.4.4 读 取 HTML 字符 串 
18.4.5 插入 HIML 字符 串 
18.5 使 用 属性 





20.1 操作 CSS 样式 基础 
20.1.1 访问 行内 样式 
20.1.2 使 用 style 
20.1.3 使 用 styleSheets 
20.1.4 使 用 selectorText..…. 























20.1.5 修改 样式 … 
18.5.1 20.1.6 添加 样式 … 
18.5.2 20.1.7 访问 泻 染 样式 
18.5.3 - 实 
20.2 实战 … 
18.5.4 删除 属性 .414 人 





20.2.1 设计 网 页 换 肤 
20.2.2 设计 折合 面板 
20.2.3 设计 工具 提示 


18.5.5 使 用 类 选择 器 . 
18.6 ”使 用 CSS 选择 器 … 了 
18.7 扫 码 拓展 阅读 二 二 在 线 鱼 二。naaaacisaeaobtetean 


18.8 在 线 练习 .… 
第 21 章 使 用 Ajax.… 
第 19 章 操作 事件 :ssesaaastsanassa 417 ey } 


中 | 视频 j 21.1 使 用 XMLHttpRequest 





























19.1 事件 基础 … 21.1.1 定义 XMLHttpRequest 对 象 
19.1.1 事件 模型 21.1.2 建立 XMLHttpRequest 连接 
19.1.2 事件 流 .… 21.1.3 发 送 GET 请 求 .. 

19.1.3 事件 类 型 21.1.4 发 送 POST 请 求 . 
1 其 定 事 宁 :ss 21.1.5 转换 囊 行 化 字符 囊 . 
19.1.5 定义 事件 处 理 函 数 . 21.1.6 

19.1.6 注册 事件 … 2 

19.1.7 销毁 事件 21.1.8 

19.1.8 使 用 event.. 


21.19 
21.1.10 获取 JavaScript 脚本 
21.1.11 获取 JSON 数据 
21.1.12 获取 纯 文本 .…… 
21.1.13 获取 头 部 信息 
21.2 ”案例 实战 .… 
21.3 ” 扫 码 实战 .… 
21.3.1 Ajax 交互 提 : 
21.3.2 ”记录 集 分 页 显 


19.1.9 事件 委托 
19.2 ”案例 实战 
19.2.1 设计 和 鼠标 拖 放 操作 . 
19.2.2 设计 饼 标 跟随 特效 a 
19.2.3 跟踪 筷 标 在 对 象 内 相对 位 置 …. 
19.2.4 设计 推 逢 子 游戏 …….…………… 
19.2.5 设计 满 屏 显示 -…- 
19.2.6 ”自动 读 取 选择 文本 . a 
19.2.7 设计 自动 跳 转 菜单 .435 












| E ~ so A ( 微 课 精 编 版 ) 


| 21.3.3 异步 更 新 Tab 面板 内 容 
| 21.3.4 快速 匹配 搜索 
| 21.4 ”搭建 IIS 虚拟 服务 器 . 








人 21.5 “在线 练习 
| 3 470 
Note 第 22 章 有 





22.1 访问 表格 .…. 
22.2 表格 排序 
22.2.1 设计 适合 排序 的 表格 结构 .. 
22.2.2 实现 基本 排序 功能 ……… 
22.2.3 ”优化 排序 性 能 . 
22.2.4 优化 类 型 排序 . 
22.2.5 完善 视觉 交互 效果 . 
22.3 ”表格 分 页 .… 
22.4 ”表格 过 滤 .… 
22.4.1 快速 过 滤 .… 
22.4.2 多 关键 字 匹 配 . 
22.4.3 列 过 滤 
22.5 ”表格 编辑 
22.6 ”在线 练习 .… 


| 第 23 章 表单 开发 485 

| 詹 " 视频 讲解 ，50 分 钟 

3 “表单 开发 热 础 peri 486 
23.1.1 访问 表单 对 象 . 
23.1.2 访问 表单 元 素 . 
23.1.3 访问 字段 属性 …. 
23.1.4 访问 文本 框 的 值 . 
23.1.5 访问 选择 框 的 值 . 
23.1.6 编辑 选项 







































设计 表单 结构 . 
23.2.2 设计 分 组 标题 . 
设计 提示 信息 . 
23.2.4 设计 条 件 字段 . 
23.2.5 表单 验证 
23.3 ”在线 练习 .… 

















第 24 章 妨 合 实 栈 .misisinmninn506 
名 4 视频 讲解 ，60 
24.1 ”购物 网 站 策划 .… 
24.2 ”设计 网 站 结构 .… 
24.2.1 定义 文件 结构 … 
24.2.2 定义 网 页 结构 .… Fs 
24.2.3 设计 效果 图 .sec 508 
24.3 ”设计 网 站 样式 
24.3.1 网 站 样式 分 类 
24.3.2 ”编写 全 局 样式 … 
24.3.3 ”编写 可 重用 样式 . 
24.3.4 ”编写 网 站 首页 主体 布局 .. 
24.3.5 ”编写 详细 页 主体 布局 .…… 
24.4 设计 首页 交互 行为 … 
24.4.1 搜索 框 文字 效果 . 
24.4.2 ”网 页 换 肤 … 
24.4.3 导航 效果 .… 
24.4.4 商品 分 类 热 销 效果 . 
24.4.5 ”产品 广告 效果 
24.4.6” 超 链接 提示 .………… 
24.4.7 品牌 活动 横向 滚动 效果 .. 
24.4.8 ”光标 滑 过 产品 列表 效果 .… 
24.5 ”设计 详细 页 交互 行为 
24.5.1 图 片 放大 镜 效 果 . 
24.5.2 图 片 这 音效 果 
24.5.3 ”小 图 切换 大 图 
24.5.4 
24.5.5 
24.5.6 ”产品 尺寸 切换 
24.5.7 产品 数量 和 价格 联动 . 
24.5.8 ”产品 评分 的 效果 . 
24.5.9 模 态 对 话 框 … 





































24.6.1 综合 实战 : 设计 专题 页 
24.6.2 综合 实战 : 设计 电子 相册 .…….S27 
24.6.3 ”综合 实战 : 设计 在 线 记 事 本 .…527 
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HTML5 基础 


根据 W3C 规范 要 求 ，Web 设计 应 该 遵循 结构 、 表 现 和 行为 的 分 离 。 三 者 关系 如 下 : 

WI 结构 : 使 用 HTML 设计 网 页 的 结构 和 内 容 

WI 表现 : 使 用 CSS 设计 的 网 页 样式 

I 行为 : 使 用 JavaScript 和 DOM 设计 网 页 脚本 代码 

2014 年 10 月 28 日 ，W3C 的 HIML 工作 组 发 布 了 HIMLS 的 正式 推荐 标准 。HTMILS5 是 构 


建 开放 Web 平台 的 核心 ,也 开启 了 互联 网 浪潮 的 新 篇 章 。 在 此 背景 下 , 让 我 们 来 具体 了 解 HIML 
就 变 得 非常 必要 了 


权威 参考 : 
https://www.w3.org/TR/html$/ 


【学 习 要 点 】 

MH 了 解 HIML 历史 和 HIML 版 本 。 

WI 熟悉 HIML4 和 XHTML 基本 语法 规范 
WI 熟悉 HIMLS 基本 语法 规范 。 








芝 UVesrreassryuacnye ws 和 有 到 精通 (久保 精 埃 ) 


1.1 HTML 历史 


1969 年 ， 美 国 建立 了 世界 上 第 一 个 计算 机 网 络 一 一 阿 帕 网 。 由 于 当时 的 计算 机 网 络 只 是 为 了 数 
据 运 算 而 建 ， 与 人 们 的 日 常生 活 相距 其 远 ， 网 络 的 发 展 非常 缓慢 ， 直 到 1985 年 ， 连 接 在 阿 帕 网 上 的 
计算 机 主机 也 只 有 1961 台 。 

1989 年 ， 欧 洲 粒子 物理 实验 室 研究 员 Tim Berners-Lee( 带 姆 。 伯 纳 斯 - 李 ) 发 明了 一 种 用 于 网 上 
交换 文本 的 格式 ， 即 基于 标记 的 语言 HTML， 并 创建 了 网 上 软件 平台 World Wide Web 万 维 网 )。 

HTML 最 吸引 人 的 地 方 在 于 其 超 文 本 链接 技术 , 通过 超 链接 , 用 户 可 以 非常 方便 地 跳 转 到 其 他 任 
何 一 个 网 页 上 。 万 维 网 的 出 现 带动 了 网 站 的 裂变 式 发 展 ， 到 2006 年 11 月 ， 全 球 互联 网 网 站 总 数 就 已 
经 超过 了 一 亿 大 关 。 

1990 年 11 月 ， 第 一 个 Web 服务 器 nxoc01.cem.ch 开始 运行 ，Tim Bemers-Lee 在 自己 编写 的 图 形 
化 Web 浏览 器 World Wide Web 上 看 到 了 最 早 的 Web 页 面 。 

世界 上 第 一 个 网 站 (当年 网 址 : http:/nxoc01.cern.ch/hypertext/www/theprojecthtml) 早 在 1992 年 
被 关闭 ， 备 份 网 址 http://www.w3.org/History/19921103-hypertext/hypertext/www/theproject.html 可 以 看 
到 最 早 的 网 页 ， 如 图 1.1 所 示 。 
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图 1.1 最 早 的 网 页 


Tim Berners-Lee 无 疑 是 Web 发 展 历 史 中 最 伟大 的 人 物 之 一 , 被 人 尊称 为 “互联 网 之 父 ” 在 W3C 
网 站 (http://www.w3.org/People/Berners-Lee/) 中 可 以 找到 他 的 近 照 ， 如 图 1.2 所 示 。 

HTML 语言 是 Tim Berners-Lee 发 明 的 ，W3C 组 织 也 是 他 一 手 缔造 的 。 

1980 年 , Tim Berners-Lee 在 欧洲 量子 物理 实验 室 负责 Enquire 研究 项 目 时 发 明了 Web 的 应 用 架 
构 。 从 1980 年 开始 ，Tim Berners-Lee 便 带 领 着 自己 的 研究 小 组 不 断 探索 、 研 究 和 试验 这 个 后 来 改变 


， 人 类 信息 交流 的 技术 工具 。 


1986 年 ，Tim Berners-Lee 参与 制订 了 ISO 标准 (ISO 8879)， 该 标准 阐述 制作 平台 并 显示 不 同 
文档 的 方法 ,这 些 文档 递交 方式 和 描述 方式 不 同 .ISO 标准 定义 了 SGML(Standard Generalized Markup 
Language) 语言 。 
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Tim Berners-Lee 





Note that the battie for the net display | put onto this page in # personal capacity, and | 
with apologies that ft is rather Americanist ~ assumes the reader is from the USA. Bust the 
message, and the battie fs imporrant and lobal, in my personal opinion. 





图 1.2 Tim Bemers-Lee 个 人 页 面 


1989 年 ，Tim Bemers-Lee 为 CERN 〈 欧 洲 核子 研究 中 心 ) 内 部 使 用 的 超 文本 文档 系统 提出 了 几 
条 建议 。 
回 ”必须 能 够 跨 平 台 ， 即 文档 系统 能 够 在 不 同 操作 系统 交流 ， 因 为 当时 存在 不 同 的 操作 系统 。 
加 ”必须 可 以 用 在 许多 已 经 存在 的 信息 系统 上 ， 并 且 人 允许 更 多 的 新 信息 可 以 加 进去 ， 即 文档 系统 
能 够 兼容 已 经 存在 的 文档 格式 ， 并 能 够 具有 扩展 性 。 
回 ”需要 一 种 传输 机 制 在 网 络 上 传输 文档 。 文 档 传输 协议 后 来 发 展 为 HITP。 
回 需要 一 种 鉴定 方案 用 来 定位 本 地 和 远程 文档 ， 即 文档 系统 能 够 准确 定位 本 地 和 远程 的 文档 位 
置 ， 后 来 发 展 为 URL 寻 址 。 
加 ”提供 格式 化 语言 。 那 时 候 还 没有 明确 提 及 HTML, 只 是 探讨 如 何 更 方便 地 展示 接收 到 的 信息 ， 
后 来 才 发 展 为 HTML 语言 。 
1990 年 ，Tim Berners-Lee 在 SGML 语言 基础 上 开发 了 HTML 语言 。 同 时 ，Tim Berners-Lee 在 自 
己 开发 的 Web 浏览 器 上 看 到 了 世界 上 最 早 的 Web 页 面 ， 如 图 1.3 所 示 , 这 时 进入 了 第 一 轮 的 Web 浏 
览 器 /编辑 器 的 开发 周期 。 











图 1.3 ”最早 的 Web 浏览 器 和 网 页 


1991 年 ，Tim Berners-Lee 将 CERN 项 目 (包括 HTML 语言 ) 的 整个 代码 和 说 明 书 发 布 到 互联 网 
上 。 在 这 以 后 的 几 年 中 ， 整 个 系统 逐渐 被 人 们 接受 ，Web 文档 开始 出 现 并 稳定 地 增长 。 同 时 一 个 公 


ye 


| Ee eg A ( 微 课 精 编 版 ) 
用 代码 库 也 已 经 出 现 ， 于 是 程序 员 们 能 够 很 容易 地 建立 和 访问 Web 文档 的 程序 ，Web 浏览 器 也 很 快 

成 为 信息 交流 的 首选 平台 。 由 于 可 实现 的 程序 数量 不 断 增长 ，Web 文档 的 多 样 性 也 开始 体现 出 来 。 
HTML 由 Tim Bemers-Lee 发 明 ， 但 是 经 过 开发 和 扩展 ， 与 早期 的 样子 相去 其 远 ， 并 且 没有 一 个 

全 | | 真正 的 标准 被 开发 出 来 。 
| 1993 年 ， 互 联网 工程 工作 小 组 (IETF) 发 布 了 超 文本 标记 语言 ， 但 这 仅 是 一 个 非 标准 的 工作 草 
案 。 后 来 ，Tim Bermers-Lee 看 到 Web 标准 的 重要 性 ， 于 是 在 1995 年 成 立 了 W3C 组 织 ， 并 逐步 统一 
| 了 HTML 的 标准 ， 从 而 黄 定 了 Web 标准 化 开发 的 基础 。 

HTML 从 诞生 至 今 ， 经 历 了 近 30 年 的 发 展 ， 其 中 有 很 多 曲折 ， 经 历 的 版 本 及 发 布 日 期 如 表 1.1 











| 表 1.1 HTML 语言 的 发 展 过 程 

| 

| 版 本 发 布 日 期 说 了 明 

| 示 记 语言 

0 于 | 1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 ， 非 标准 

| nh 1995 年 11 月 作为 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 后 被 宣布 已 

| 经 过 时 

| _HIML 32 1996 年 1 月 14 日 ”| W3C 推荐 标准 

| _HIML 4.0 1997 年 12 月 18 日 | W3C 推荐 标准 

| _HIML 4.01 1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 

| .01 语法 ， 未 标 ; 示 会 

py 2000 年 5 月 15 日 0 HTML 4.01 语法 , 是 国际 标准 化 组 织 和 国际 电工 委员 会 

| XHIML 1.0 2000 年 1 月 26 日 ”| W3C 推荐 标准 ， 修 订 后 于 2002 年 8 月 1 日 重新 发 布 

| XHTML 1.1 2001 年 5 月 31 日 | 较 1.0 有 不 大 的 改进 

”_XHTML 2.0 草案 | 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 

| HTML 5 草案 2008 年 1 月 HTML 5 规范 先是 以 草案 发 布 ， 经 历 了 漫长 的 过 程 

| _HIML5 2014 年 10 月 28 日 | W3C 推荐 标准 

| _HTIML51 2017 年 10 月 3 日 ”| W3C 发 布 HIMLS 第 一 个 更 新 版 本 (http://www.w3.org/TR/html51/) 
HIML5.2 2017 年 12 月 14 日 | W3C 发布 HTML5 第 二 个 更 新 版 本 (http://www.w3.org/TR/html52/) 
HIML5.3 2018 年 3 月 15 日 | W3C 发 布 HTML5 第 三 个 更 新 版 本 (http://www.w3.org/TR/html53/) 


这 提示 : 从 上 面 HTML 发 展 列表 来 看 ，HTML 没有 1.0 版 本 ， 这 主要 是 因为 当时 有 很 多 不 同 的 版 
本 。 有 些 人 认为 Tim Berners-Lee 的 版 本 应 该 算 初版 ， 他 的 版 本 中 还 没有 img 元 素 ， 也 就 
是 说 ，HTML 刚 开始 时 仅 能 够 显示 文本 信息 。 


1.2 HTML 文档 结构 


| HTML 是 构成 网 页 文档 的 主要 语言 ， 使 用 HTML 语言 创建 的 文档 为 文本 文件 ， 可 以 使 用 任意 文 
本 编辑 器 进行 编辑 ， 文 件 扩展 名 为 html 或 .htm。 


1.2.1 HTML4 基本 结构 
HTML 文档 一 般 都 应 包含 两 部 分 : 头 部 区 域 和 主体 区 域 。HITML 文档 基本 结构 由 3 个 标签 负责 





od。 
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组 织 ，<html>、<head> 和 <body>。 其 中 <htmb> 标 签 标识 HTML 文档 ，<head> 标 签 标识 头 部 区 域 , 而 ， 
<body> 标 签 标识 主体 区 域 。 | 
【示例 】 一 个 完整 的 HTML4 文档 基本 结构 如 下 。 | 








-<html> <!-- 语 法 开始 -> 量 全 从 
<head> | 攻 
<!-- 头 部 信息 ， 如 <title> 标 签 定义 的 网 页 标题 --> 
le Note 





<!-- 主 体 信息 ， 包 含 网 页 显示 的 内 容 --> | 
</body> 
</html> <!-- 语 法 结束 --> 
可 以 看 到 ， 每 个 标签 都 是 成 对 组 成 ， 第 一 个 标签 (如 <html>) 表示 标识 的 开始 位 置 ， 而 第 二 个 标 
签 (如 </html>) 表示 标识 的 结束 位 置 。<html> 标 签 包含 <head> 和 <body> 标 签 ， 而 <head> 和 <body> 标 
签 是 并 列 排列 。 
如 果 把 上 面 字 符 代码 放置 在 文本 文件 中 ， 然 后 另存 为 “testhtml”， 就 可 以 在 浏览 器 中 浏览 了 。 当 
然 ， 由 于 这 个 简单 的 HTML 文档 还 没有 包含 任何 信息 ， 所 以 在 浏览 器 中 是 看 不 到 任何 显示 内 容 的 。 
容 提示 : 网 页 就 是 一 个 文本 文件 ， 文 件 扩展 名 一 般 为 .html 或 .htm， 俗 称 为 静态 网 页 ， 可 以 直接 在 
浏览 器 中 预览 ; 也 可 以 是 .asp、.aspx、.php 或 .jsp 等 ， 俗 称 为 动态 网 页 ， 需 要 服务 器 解析 
之 后 ， 浏 览 器 才能 够 预览 。 


1.2.2 ”XHTML 基本 结构 


XHTML 是 The Extensible HyperText Markup Language 的 缩写 ， 中 文 翻译 为 可 扩展 标识 语言 ， 实 
际 上 它 是 HTML4 的 升级 版 本 。XHTML 和 HITML4 在 语法 和 标签 使 用 方面 差别 不 大 。 熟 悉 HTML 语 
言 ， 再 稍 加 熟悉 标准 结构 和 规范 ， 也 就 熟悉 了 XHTML 语言 。XHTML 具有 如 下 特点 : 

回 ” 用 户 可 以 扩展 元 素 ， 从 而 扩展 功能 ， 但 在 目前 1.1 版 本 下 ， 用 户 只 能 够 使 用 固定 的 预定 义 元 

素 ， 这 些 元 素 基 本 上 与 HTML4 版 本 元 素 相同 ， 但 删除 了 部 分 属性 描述 性 的 元 素 。 
回 ”能 够 与 HIML 很 好 地 沟通 , 可 以 兼容 当前 不 同 的 网 页 浏览 器 , 实现 XHTML 页 面 的 正确 浏览 。 | 
【示例 】 完 整 的 XHTML 文档 结构 如 下 所 示 。 | 
<!--[XHTML 文档 基本 框架 ]-> | 
<!-- 定 义 XHTML 文档 类 型 --> | 
<!IDOCTYPE html PUBLIC"-WW3CWDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/ ， 
xhtmll-transitional dtd"> 
<!--XHTML 文档 根 元 素 ， 其 中 xmlns 属性 声明 文档 命名 空间 --> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<!-- 头 部 信息 结构 元 素 --> 





<head> 

<!-- 设 置 文档 字符 编码 -> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<!-- 设 置 文 档 标题 --> 

<title> 无 标题 文档 </title> 

</head> 

<!-- 主 体内 容 结构 元 素 -> 

<body> 


je 


| 
| </html> 
J 
| XHTML 代码 不 排斥 HTML 规则 ， 在 结构 上 也 基本 相似 ， 但 如 果 仔 细 比 较 ， 它 有 两 点 不 同 。 
全 | | 1 定义 文档 类 型 
| 在 XHTML 文档 第 一 行 新 增 了 <!DOCTYPE> 元 素 ， 该 元 素 用 来 定义 文档 类 型 。DOCTYPE 是 
pte document type (文档 类 型 ) 的 简写 ， 它 设置 XHTML 文档 的 版 本 。 使 用 时 应 注意 该 元 素 的 名 称 和 属性 
| 必须 大 写 。 
| DTD (如 xhtmll-transitional.dtd) 表示 文档 类 型 定义 ， 里 面包 含 了 文档 的 规则 ， 网 页 浏览 器 会 根 
据 预 定义 的 DTD 来 解析 页 面 元 素 ， 并 把 这 些 元 素 所 组 织 的 页 面 显示 出 来 。 要 建立 符合 网 页 标准 的 文 
档 ，DOCTYPE 声明 是 必 不 可 少 的 关键 组 成 部 分 ， 除 非 你 的 XHTML 确定 了 一 个 正确 的 DOCTYPE， 
否则 页 面 内 的 元 素 和 CSS 不 能 正确 生效 。 
2. 声明 命名 空间 
在 XHTML 文档 根 元 素 中 必须 使 用 xmlns 属性 声明 文档 的 命名 空间 .xmlns 是 XHTML NameSpace 
的 缩写 ， 中 文 翻译 为 命名 空间 (也 有 人 翻译 为 名 字 空 间 、 名 称 空间 )。 命 名 空间 是 收集 元 素 类 型 和 属 
性 名 字 的 一 个 详细 DTD， 它 允许 通过 一 个 URL 地 址 指向 来 识别 命名 空间 。 
XHTML 是 HTML 向 XML 过 渡 的 标识 语言 ， 它 需要 符合 XML 规则 , 因此 也 需要 定义 名 字 空 间 。 
但 是 XHTML 1.0 还 不 允许 用 户 自 定义 元 素 ， 因此 它 的 命名 空间 都 相同 ， 就 是 “http://www.w3.org/ 
1999/xhtml”。 这 也 是 每 个 XHTML 文档 的 xmlns 值 都 相同 的 缘故 。 


1.2.3 HTML5 基本 结构 


HTMLS5 文档 允许 省 略 <html>、<head>、<body> 等 元 素 ， 使 用 HTML5 的 DOCTYPE 声明 文档 类 
型 ， 简 化 <meta> 元 素 的 charset 属性 值 ， 省 略 <p> 元 素 的 结束 标记 、 使 用 < 元 素 广 的 方式 来 结束 <meta> 
元 素 ， 以 及 <br> 元 素 等 语法 知识 要 点 。 

【示例 】 一 个 简单 的 HTML5 文档 基本 结构 如 下 。 


<!IDOCTYPE html> 

‘<meta charset="UTF-8"> 

<title>HTML5 基本 语法 </title> 

<hl>HTMLS 的 目标 </h1> 

<p>HTML 5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 

<br> 例 如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HTML 变 得 更 简洁 ， 开 发 出 
了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 Web 平 台 提 供 了 许 许 多 多 新 的 功能 。 


这 段 代码 在 正 浏览 器 中 的 运行 结果 如 图 1.4 所 示 。 











HTMLS 的 目标 
再 5 前 目标 是 为 了 能 够 创建 更生 单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代 
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i 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 夫人 加倍 
币 洁 ， Ve 性 、 新 的 元 幸 寺 。 总 体 来 说 ， 
了 许 许 训 条 新 的 功 i 





1.4 编写 HIMLS 文档 
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1.3 HTML 基本 语法 


HTML 文档 由 标签 和 各 种 信息 组 成 ，HIML 标签 可 以 标识 文字 、 图 形 、 动 画 、 声 音 、 表 格 、 超 | 
链接 等 网 页 对 象 。 标 签 可 以 包含 属性 ， 用 来 设置 标签 的 各 种 功能 。 编 写 HTML 文档 时 ， 必 须 遵循 一 
定 的 语法 规范 ， 否 则 浏览 器 是 无 法 解析 的 。 | 


1.3.1 HTML4 语法 


HTML4 的 规范 条 文 不 多 ， 具 体 说 明 如 下 : | 

加 ”所 有 标签 都 包含 在 “<” 和 “>” 起 止 标识 符 中 , 构成 一 个 标签 。 例 如，<style>、<head>、<body> | 
和 <div> 等 。 

回 在 HIML 文档 中 ， 绝 大 多 数 元 素 都 有 起 始 标签 和 结束 标签 ， 在 起 始 标签 和 结束 标签 之 间 包 含 
的 是 元 素 主体 。 例 如 ，<body> 和 </body> 中 间 包 含 的 就 是 网 页 内 容 主体 。 

加 ”起 始 标 签 包含 元 素 的 名 称 ， 以 及 可 选 属性 ， 也 就 是 说 ， 元 素 的 名 称 和 属性 都 必须 在 起 始 标签 
中 。 结 束 标签 以 反 斜 杠 开始 ， 然 后 附加 上 元 素 名 称 。 例 如 : 

<tag> 元 素 主体 </tag> 

回 ”元素 的 属性 包含 属性 名 称 和 属性 值 两 部 分 ， 中 间 通 过 等 号 进行 连接 ， 多 个 属性 之 间 通 过 空格 
进行 分 隔 。 属 性 与 元 素 名 称 之 间 也 是 通过 空格 进行 分 隔 。 例 如 : 

<tag al="v1" a2="V2" a3="V3" eee an="vn"> 元 素 主体 </tag> 

回 ”少数 元 素 的 属性 也 可 能 不 包含 属性 值 ， 仅 包含 一 个 属性 名 称 。 例 如 : 

<tag al a2 a3 …… an> 元 素 主体 </tag> 


回 “一般 属 性 值 应 该 包含 在 引号 内 ， 虽 然 不 加 引号 ， 浏 览 器 也 能 够 解析 ， 但 是 读者 应 该 养 成 良好 

的 习惯 。 
回 ”属性 是 可 选 的 ， 元 素 包含 多 少 个 属性 ， 也 是 不 确定 ， 这 主要 根据 不 同 元 素 而 定 。 不 同 的 元 素 | 
会 包含 不 同 的 属性 。HTML 也 为 所 有 元 素 定义 了 公共 属性 ， 如 tile、id、class、style 等 。 | 
虽然 大 部 分 标签 都 是 成 对 出 现 , 但 是 也 有 少数 标签 不 是 成 对 的 , 这 些 孤 立 的 标签 , 被 称 为 空 标签 。 | 
空 标签 仅 包含 起 始 标签 ， 没 有 结束 标签 。 例 如 : | 
| 








<tag> 
同样 ， 空 标签 也 可 以 包含 很 多 属性 ， 用 来 标识 特殊 效果 或 者 功能 ， 例 如 : 
<tag al="v1" al="v1" a2="V2" an="vn"> 


回 标签 可 以 相互 嵌 套 ， 形 成 文档 结构 。 嵌 套 必须 匹配 ， 不 能 交错 嵌 套 例如， 
<div><span></div></span> 。 合 法 的 嵌 套 应 该 是 包含 或 被 包含 的 关系 ， 例 如， 
<div><span></span></div> 或 <span><div></div></span>。 

加 ”HTML 文档 所 有 信息 必须 包含 在 <html> 标 签 中 ， 所 有 文档 元 信息 应 包含 在 <head> 子 标签 中 ， 
而 HTML 传递 信息 和 网 页 显示 内 容 应 包含 在 <body> 子 标签 中 。 
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| 【示例 】 对 于 HTML4 文档 来 说 ， 除 了 必须 符合 基本 语法 规范 外 ， 还 必须 保证 文档 结构 信息 的 完 
| 整 性 。 完 整 文档 结构 如 下 所 示 。 
| <IDOCTYPE html PUBIIC "/W3CWDTD XHTML 1.0 Transitional/EN" whttp:/www.wl.org/TR/xhtmll/DTD/ 
天 站 xhtmll-transitional.dtd"> 
= <html xmlns="http:/www.w1.org/1999/xhtml"> 


| 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
| <title> 文 档 标题 </title> 
| </head> 
</html> 


HTML4 文档 应 主要 包括 如 下 内 容 。 

加 ”必须 在 首 行 定义 文档 的 类 型 ， 过 渡 型 文档 可 省 略 。 

加 ”<html> 标 签 应 该 设置 文档 名 字 空 间 ， 过 渡 型 文档 可 省 略 。 

回 ”必须 定义 文档 的 字符 编码 ， 一 般 使 用 <meta> 标 签 在 头 部 定义 ， 常 用 字符 编码 包括 中 文 简体 
| (gb2312) 、 中 文 繁体 (big5) 和 通用 字符 编码 Cutft8) 。 

| 回应 该 设置 文档 的 标题 ， 可 以 使 用 <title> 标 签 在 头 部 定义 。 

| HTML 文档 扩展 名 为 .htm 或 .html， 保 存 时 必须 正确 使 用 扩展 名 ， 和 否则 浏览 器 无 法 正确 地 解析 。 
| 如 果 要 在 HTML 文档 中 增加 注释 性 文本 ， 则 可 以 在 “<!--” 和 “-->” 标 识 符 之 间 增 加 ， 例 如 : 

| < 单行 注释 -> 
或 
| 


< 





多 行 注释 


1 


| 1.3.2 XHTML 语法 
视频 讲解 | XHTML 是 根据 XML 语法 简化 而 来 的 ， 因 此 它 遵循 XML 文档 规范 。 同 时 XHTML 又 大 量 继承 
| HTML4 语法 规范 ， 因 此 与 HIML4 非常 相似 ， 不 过 它 对 代码 的 要 求 更 加 严谨 。 遵 循 这 些 要 求 ， 对 于 
| 培养 良好 的 XHTML 代码 书写 习惯 是 非常 重要 的 。 
| 思 ”在 文档 的 开头 必须 定义 文档 类 型 。 
加 ”在 根 元 素 中 应 声明 命名 空间 ， 即 设置 xmlns 属性 。 
加 ”所 有 标签 都 必须 是 闭合 的 。 在 HTML 中 ,你 可 能 习惯 书写 独立 的 标签 ， 如 <p>、<li>， 而 不 爱 
写 对 应 的 </p> 和 </li> 来 关闭 它们 。 但 在 XHTML 中 这 是 不 合法 的 。XHTML 要 求 有 严谨 的 结 
构 ， 所 有 标签 都 必须 关闭 。 如 果 是 单独 不 成 对 的 标签 ， 应 在 标签 的 最 后 加 一 个 “/” 来 关闭 它 ， 
如 <br 广 。 
加 ”所 有 元 素 和 属性 都 必须 小 写 . 这 与 HIML 不 同 ,XHTML 对 大 小 写 是 敏感 的 ,<tile> 和 <TITLE> 
表示 不 同 的 标签 。 
| 加 ”所 有 的 属性 必须 用 引号 ("") 括 起 来 。 在 HTML 中 ， 你 可 以 不 需要 给 属性 值 加 引号 ， 但 是 在 
| XHTML 中 ， 它 们 必须 被 加 引号 ， 如 <table height="80"></table>。 特 殊 情 况 下 ， 可 以 在 属性 值 
| 里 使 用 双 引 号 或 单 引号 。 








第 1 章 ITNMA5 基 础 一 CO | 
Rp | 


回 。” 所 有 标签 都 必须 合理 谋 套 。 这 是 因为 XHTML 要 求 有 严谨 的 结构 ， 因 此 所 有 的 嵌 套 都 必须 按 





顺序 。 
回 。” 所 有 属性 都 必须 被 赋值 ， 没 有 值 的 属性 就 用 自身 来 赋值 。 例 如 : 
错误 写法 : 
<td nowrap> 
正确 写法 : | 
<td nowrap="nowrap"> | 


回 。” 所 有 特殊 符号 都 用 编码 表示 ， 例 如 ， 小 于 号 〈<) 不 是 元 素 的 一 部 分 ， 必 须 被 编码 为 “&lt;”; | 
大 于 号 (>) 不 是 元 素 的 一 部 分 ， 必 须 被 编码 为 “&gt;”。 | 
回 ”不 要 在 注释 内 容 中 使 用 “--”。“--” 只 能 出 现在 XHTML 注释 的 开头 和 结束 ， 也 就 是 说 , 在 | 
内 容 中 它们 不 再 有 效 。 例 如 





| 
并 误 写 法 : 
< 注释 -注释 -> 
正确 写法 : 
二 -注释 注释 -> 


回 XHTML 规范 废除 了 name 属性 ， 而 使 用 id 属性 作为 统一 的 名 称 。 在 下 4.0 及 以 下 版 本 中 应 | 
保留 name 属性 ， 使 用 时 可 以 同时 使 用 id 和 name 属性 。 | 
上 面 列举 的 几 点 是 XHTML 最 基本 的 语法 要 求 , 习惯 于 HTML 的 读者 应 克服 代码 书写 中 的 随意 ，| 
相信 好 的 习惯 会 影响 你 的 一 生 。 | 
1.3.3 HTML5 语法 

HTML5 以 HTML4 为 基础 ， 保 证 与 之 前 的 HTML4 语法 达到 最 大 限度 的 兼容 。 同 时 ， 对 HTML4 
进行 了 全 面 升 级 改造 ， 具 体 变化 如 下 。 | 
1 内 容 类 型 | 
HIML5 的 文件 扩展 名 和 内 容 类 型 保持 不 变 。 例 如 ， 扩 展 名 仍然 为 “.html” 或 “.htm”， 内 容 类 型 | 
(ContentType) 仍然 为 “text/html”。 | 
2 文档 类 型 | 

在 HTML4 中 ， 文 档 类 型 的 声明 方法 如 下 : 


<IDOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 Transitional/EN" "http://www.w3.0rg/TR/xhtmll/DID/ ， 
xhtmll-transitionaldtd"> | 


在 HIML5 中 ， 文 档 类 型 的 声明 方法 如 下 : 
| 

<!IDOCTYPE html> 

当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 中 加 入 SYSTEM 识别 符 ， 声 明 方法 如 下 : 

<!IDOCTYPE HTML SYSTEM "aboutlegacy-compat'> 

在 HIML5 中 ，DOCTYPE 声明 方式 是 不 区 分 大 小 写 的 ， 引 号 也 不 区 分 是 单 引号 还 是 双 引 号 。 
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攻 
< 全 注意 : 使 用 HTML5 的 DOCTYPE 会 触发 浏览 器 以 标准 模式 显示 页 面 。 众 所 周知 ， 网 页 都 有 多 种 
显示 模式 ， 如 怪异 模式 (Quirks ) 、 标 准 模式 ( Standards ) 。 浏 览 器 根据 DOCTYPE 来 识 


。 别 该 使 用 哪 种 解析 模式 。 
网 3， 字符 编码 
在 HTML4 中 ， 使 用 meta 元 素 定义 文档 的 字符 编码 ， 如 下 所 示 : 


| <meta http-equiv="Content-Type" content="text/html:charset=UTF-8"> 
在 HTML5 中 ， 继 续 沿用 meta 元 素 定义 文档 的 字符 编码 ， 但 是 简化 了 charset 属性 的 写法 ， 如 下 
| 所 示 : 

| <meta charset="UTF-8"> 

| 

| 


对 于 HTML5 来 说 ， 上 述 两 种 方法 都 有 效 ， 用 户 可 以 继续 使 用 前 面 一 种 方式 ， 即 通过 content 元 
素 的 属性 来 指定 ， 但 是 不 能 同时 混用 两 种 方式 。 


< 注意 : 在 传统 网 站 中 ， 可 能 会 存在 下 面 标记 方式 。 在 HIML5 中 ， 这 种 字符 编码 方式 将 被 认为 是 
错误 的 。 
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html:charset=UTF-8"> 
从 HTMLS5 开始 ， 对 于 文件 的 字符 编码 推荐 使 用 UTF-8。 
4. 标记 省 略 
在 HTML5 中 ， 元 素 的 标记 可 以 分 为 3 种 类 型 : 不 允许 写 结束 标记 ， 可 以 省 略 结束 标记 ， 开 始 标 
记 和 结束 标记 全 部 可 以 省 略 。 下 面 简单 介绍 这 3 种 类 型 各 包括 哪些 HTML5 新 元 素 。 
第 一 ， 不 允许 写 结束 标记 的 元 素 有 : area、base、br、col、command、embed、hr、img、input、 
keygen、 link、 meta、 param、 source、track、wbr。 
第 二 ， 可 以 省 略 结束 标记 的 元 素 有 : 1i、dt、dd、p、rt、Ip、optgroup 、option 、colgroup 、thead、 
tbody、ttoot、tr、td、 也 。 
第 三 ， 可 以 省 略 全 部 标记 的 元 素 有 : html、head、body、colgroup、tbody。 


窟 提示 : 不 允许 写 结束 标记 的 元 素 是 指 ， 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 
| 允许 使 用 < 元 素 /> 的 形式 进行 书写 。 例 如 : 

| 加 ”错误 的 书写 方式 

<br></br> 


回 正确 的 书写 方式 
<br> 


HTML5 之 前 的 版 本 中 <br> 这 种 写法 可 以 继续 沿用 。 
可 以 省 略 全 部 标记 的 元 素 是 指 元 素 可 以 完全 被 省 略 。 注意， 该 元 素 还 是 以 隐 式 的 方式 存在 
的 。 例如, 将 body 元 素 省 略 不 写 时 , 它 在 文档 结构 中 还 是 存在 的 , 可 以 使 用 document.body 
进行 访问 。 

5. 布尔 值 

对 于 布尔 型 属性 ， 如 disabled 与 readonly 等 ， 当 只 写 属性 而 不 指定 属性 值 时 ,表示 属性 值 为 tue; 
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如 果 属 性 值 为 false， 可 以 不 使 用 该 属性 。 另 外 ， 要 想 将 属性 值 设 定 为 tue 时 ， 也 可 以 将 属性 名 设 定 
为 属性 值 ， 或 将 空 字符 串 设 定 为 属性 值 。 
【示例 1】 下 面 是 几 种 正确 的 书写 方法 。 

<!-- 只 写 属性 ， 不 写 属性 值 ， 代 表 属性 为 tue--> 
<input type="checkbox" checked> | 
<!-- 不 写 属性 ， 代 表 属 性 为 false--> 
<input type="checkbox"> | 
<!-- 属 性 值 = 属性 名 ， 代 表 属 性 为 tue--> | 
<input type="checkbox" checked="checked"> | 
<!-- 属 性 值 = 空 字符 串 ， 代 表 属 性 为 tue--> | 
<input type="checkbox" checked=""> 











6、 属 性 值 | 

| 

属性 值 可 以 加 双 引 号 ， 也 可 以 加 单 引 号 。HTML5 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 | 
字符 串 、<、>、=、 单 引号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 | 
【示例 2】 下 面 写法 都 是 合法 的 。 
<input type="text"> | 
<input type='text> | 
<input type=text> | 


1.4 案例 实战 


目前 最 新 主流 浏览 器 对 HTML5 都 提供 了 很 好 的 支持 ， 下 面 结合 示例 介绍 如 何 正 确 创建 HTML5 | 
文档 。 


1.4.1 编写 第 一 个 HTMLS5 文档 


本 节 示 例 将 遵循 HIMLS 语法 规范 编写 一 个 文档 。 本 例文 档 省 略 了 <html>、<head>、<body> 等 标 | 视频 讲解 
签 , 使 用 HTMLS5 的 DOCTYPE 声明 文档 类 型 ， 简 化 <meta> 的 charset 属性 设置 ， 省 略 <p> 标 签 的 结束 | 
标记 ， 使 用 < 元 素 福 的 方式 来 结束 标记 ， 如 <meta> 和 <br> 标 签 等 。 | 
<!IDOCTYPE html> | 
<meta charset="UTF-8"> | 
<title>HTMLS5 基本 语法 </title> 
<hl>HTML5 的 目标 </h1> | 
<p>HTML 5 的 目标 是 为 了 能 够 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 | 
<br> 例 如 ， 为 了 使 Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 HTML 变 得 更 简洁 ， 开 发 出 | 
了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 Web 平台 提供 了 许 许多 多 新 的 功能 。 | 
| 


这 段 代码 在 正 浏览 器 中 的 运行 结果 如 图 1.5 所 示 。 | 
通过 短 短 几 行 代码 就 完成 了 一 个 页 面 的 设计 ， 这 充分 说 明了 HTMLS5 语法 的 简洁 。 同 时, HTML5 | 
不 是 一 种 XML 语言 ， 其 语法 也 很 随意 ， 下 面 从 这 两 方面 进行 逐 句 分 析 。 
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会 扩 | | 的 书写 出 更 简洁 的 HBTML 代 
oe 各， 为 了 使 Web 应 用 程序 的 开发 交 得 更 容易 ， 提 供 了 很 多 API; 为 了 使 


HTML 变 得 更 简洁 ， 开 发 出 了 新 的 属性 、 新 的 元 素 等 。 总 体 来 说 ， 为 下 一 代 
Web 平 台 提 供 了 许 许多 多 新 的 功能 。 





图 1.5 编写 HTML5 文档 





<!IDOCTYPE HIML> 

不 需要 包括 版 本 号 ， 仅 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模式 ， 可 谓 简明 扼要 。 
接 下 来 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏览 器 不 能 正确 解析 。 

<meta charset="utf-8"> 


同样 也 很 简单 ，HTMLS5 不 区 分 大 小 写 ， 不 需要 标记 结束 符 ， 不 介意 属性 值 是 否 加 引号 ， 即 下 列 
代码 是 等 效 的 。 


在 主体 中 ， 可 以 省 略 主体 标记 ， 直 接 编写 需要 显示 的 内 容 。 虽 然 在 编写 代码 时 省 略 了 <html>、 
<head> 和 <body> 标 记 ， 但 在 浏览 器 进行 解析 时 ， 将 会 自动 进行 添加 。 但 是 ， 考 虑 到 代码 的 可 维护 性 ， 
在 编写 代码 时 ， 应 该 尽量 增加 这 些 基本 结构 标签 。 


1.4.2 比较 HTML4 与 HTML5 文档 结构 


下 面 通过 示例 具体 说 明 HTML5 是 如 何 使 用 全 新 的 结构 化 标签 编织 网 页 的 。 
【示例 1】 本 例 设计 将 页 面 分 成 上 、 中 、 下 三 部 分 : 上 面 显示 网 站 标题 ， 中 间 分 两 部 分 ， 左 侧 为 
辅助 栏 ， 右 侧 显示 网 页 正文 内 容 ， 下 面 显示 版 权 信息 ， 如 图 1.6 所 示 。 





EEC EE EIT ”> 





1.6 简单 的 网 页 布局 
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使 用 HTML4 构建 文档 基本 结构 如 下 : 

<div id="header">[ 标 题 栏 ]</div> 

<div id="aside">[ 侧 边栏 ]</div> 

<div iq="article">[ 正 文 内 容 ]</div> 

<div id="footer">[ 页 脚 栏 ]</div> 

尽管 上 述 代码 不 存在 任何 语法 错误 ， 也 可 以 在 HTML5 中 很 好 地 解析 ， 但 该 页 面 结构 对 于 浏览 
来 说 是 不 具有 区 分 度 的 。 对 于 不 同 的 用 户 来 说 ，ID 命名 可 能 因 人 而 异 ， 这 对 浏览 器 来 说 ， 就 无 法 辨 
别 每 个 div 元 素 在 页 面 中 的 作用 ， 因 此 也 必然 会 影响 其 对 页 面 的 语义 解析 。 | 

【示例 2】 下 面 使 用 HTMLS 新 增 的 元 素 重新 构建 页 面 结构 ， 明 确定 义 每 部 分 在 页 面 中 的 作用 。 

<header>[ 标 题 栏 ]</header> 

<aside>[ 侧 边栏 ]</aside> 

<article>[ 正 文 内 容 ]</article> 

<footer>[ 页 脚 栏 ]</footer> 

虽然 两 段 代 码 不 一 样 ， 但 比较 上 述 两 段 代 码 ， 使 用 HTMLS5 新 增 元 素 创建 的 页 面 代码 更 简洁 、 明 
晰 。 可 以 很 容易 地 看 出 , 使 用 <div id="header">、<div id="aside">、<div id="article"> 和 <div id="footer"> 
这 些 标记 元 素 没有 任何 语义 , 浏览 器 也 不 能 根据 标记 的 ID 名 称 来 推断 它 的 作用 , 因为 ID 名 称 是 随意 
变化 的 。 

而 HIMLS 新 增 元 素 header， 明 确 地 告诉 浏览 器 此 处 是 页 头 ，aide 元 素 用 于 构建 页 面 辅助 栏目 ， 
article 元 素 用 于 构建 页 面 正文 内 容 ，footer 元 素 定义 页 脚注 释 内 容 。 这 样 极 大 地 提高 了 开发 者 便利 性 
和 浏览 器 的 解析 效率 。 





1.5 扫 码 阅读 


如 果 你 是 一 位 零 基础 的 读者 ， 第 一 次 接触 网 页 设计 , 那么 我 们 建议 你 先 
扫 码 阅读 本 节 内 容 ， 了 解 什 么 是 网 页 ， 什 么 是 设计 ， 什 么 是 HIML、CSS、 
JavaScript 等 一 些 不 知 所 云 的 概念 。 详 细 内 容 请 扫 码 阅读 。 





1.6 在 线 练 司 | 


练习 设计 HTML5 文档 的 基本 方法 。 
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第 py 章 
新 建 HTML5 文档 


完整 的 HIML 文档 应 该 包含 两 部 分 结构 : 头 部 信息 (<head> ) 和 主体 内 容 ( <body> )。 为 了 
使 网 页 内 容 更 加 清晰 、 明 确 ， 容 易 被 他 人 阅读 ， 或 者 被 浏览 器 以 及 各 种 设备 理解 ， 新 建 HTML5 


文档 之 后 ， 需 要 完善 这 两 部 分 内 容 ， 构 建 基本 的 网 页 框架 


【 学 习 要 点 】 

MH 正确 设置 HIMLS 元 信息 

PH 正确 使 用 HTMLS5 语义 元 素 

PI 设计 符合 语义 的 HTML5 文档 结构 


第 2 章 新 建 HTML5 文 楼 一 胸 T 


2.1 设置 头 部 信息 


在 HTML 文档 的 头 部 区 域 存储 着 各 种 网 页 基本 信息 ， 这 些 信息 主要 被 浏览 器 采用 ， 不 会 显示 在 ， 
网 页 中 。 另 外 ， 搜 索引 擎 也 会 检索 这 些 信息 ， 因 此 重视 并 设置 这 些 头 部 信息 非常 重要 。 


2.1.1 定义 网 页 标题 


使 用 <title> 标 签 可 定义 文档 的 标题 。 例 如 : 


<html> 
<head> 
<title>HTMLS 标签 说 明 </title> 





浏览 器 会 把 文档 的 标题 放 在 窗口 的 标题 栏 或 状态 栏 中 显示 ， 如 图 2.1 所 示 。 当 把 文档 加 入 用 户 的 
链接 列表 、 收 藏 夹 或 书签 列表 时 ， 标 题 将 作为 该 文档 链接 的 默认 名 称 。 


HTML5 标 签 列表 





图 2.1 显示 网 页 标题 


痊 提示 : 设置 一 个 正确 的 标题 非常 重要 : 很 多 搜索 引擎 会 把 网 页 标题 作为 与 页 面相 关 的 描述 性 词语 
进行 检索 ,被 插入 到 庞大 的 链接 数据 库 中 。 因此 , 为 每 个 文档 都 认真 地 选择 一 个 描述 性 的 、 
实用 的 、 与 上 下 文 相关 联 的 标题 。 


背 误 的 标题 : 

抽象 的 标题 没有 意义 。 例 如 ，“ 第 十 六 章 ” 或 “第 五 部 分 ”这 样 的 标题 ， 对 读者 理解 网 页 内 
容 方面 毫 无 用 处 。 

自我 引用 的 标题 也 没有 什么 用 处 。 例 如 ，“ 主 页 ”这 样 的 标题 和 内 容 毫 无 关系 ， 类 似 的 还 有 
“反馈 页 ”或 “常用 链接 ”等 。 

正确 的 标题 : | 

使 用 描述 性 更 强 的 标题 。 例 如 ，“ 第 十 六 章 : HIML 标题 ”， 或 者 “第 五 部 分 : 如 何 使 用 | 
标题 ”， 这 样 的 标题 说 明了 文档 的 具体 内 容 ， 可 以 吸引 读者 有 兴趣 读 下 去 。 | 

设计 一 个 能 够 表达 一 定 内 容 和 目的 的 标题 , 令 读 者 赁 这 个 标题 就 可 以 判断 是 否 有 必要 访问 这 
个 页 面 。 例 如 ，“HTML <title> 标签 的 详细 信息 ”， 这 就 是 一 个 描述 性 的 标题 ， 类 似 的 还 | 
有 “HTML <title> 标签 的 反馈 页 ”等 。 
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| 
| 2.1.2 ”定义 网 页 元 信息 
| 
视频 讲解 | 使 用 <meta> 标 签 可 以 定义 网 页 的 元 信息 ， 例 如 ， 定 义 针对 搜索 引擎 的 描述 和 关键 词 ， 一 般 网 站 都 


伟 凡 必须 设置 这 两 条 元 信息 ， 以 方便 搜索 引擎 检索 。 
本 定义 网 页 的 描述 信息 : 
<meta name="description" content=" 标 准 网 页 设计 专业 技术 资讯 " /> 

| 定义 页 面 的 关键 词 : 
| <meta name="keywords" content="HTML.DHTML., CSS, XML, XHTML. JavaScript" /> 
| <meta> 标 签 位 于 文档 的 头 部 ，<head> 标 签 内 ， 不 包含 任何 内 容 。 使 用 <meta> 标 签 的 属性 可 以 定 
| 义 与 文档 相关 联 的 名 称 / 值 对 。<meta> 标 签 可 用 属性 说 明 如 表 2.1 所 示 。 
| 
| 表 2.1 <meta> 标 签 属性 列表 


I RR A 从 入 门 到 精通 ( 微 香 精 编 版 ) 





必需 的 ， 定 义 与 http-equiv 或 name 属性 相关 联 的 元 信息 
把 content 属性 关联 到 HTTP 头 部 。 取 值 包括 : content-type、expires、refresh、set-cookie 


| 
| 

| 

| 把 content 属性 关联 到 一 个 名 称 。 取 值 包括 : author、description、keywords、generator、revised 等 
| 定义 用 于 翻译 content 属性 值 的 格式 

| 定义 文档 的 字符 编码 
| 
| 
| 
| 





【示例 】 下 面 列举 常用 元 信息 的 设置 代码 ， 更 多 元 信息 的 设置 可 以 参考 HTML 手册 。 

使 用 http-equiv 等 于 content-type， 可 以 设置 网 页 的 编码 信息 。 

设置 UTF-8 编码 : 
| <meta http-equiv="content-type" content="text/html: charset=UTF-8" /> 
， 窟 提示 : HTMLS 简化 了 字符 编码 设置 方式 ，<meta charset="utf-8">， 其 作用 是 相同 的 
”加 设置 简体 中 文 gb2312 编码 : 

<meta http-equiv="content-type" content="text/html: charset=gb2312" /> 
| 4 注意 : 每 个 HTML 文档 都 需要 设置 字符 编码 类 型 ， 否 则 可 能 会 出 现 乱 码 ， 其 中 UTF-8 是 国家 通 
| 用 编码 ， 独 立 于 任何 语言 ， 因 此 都 可 以 使 用 。 

使 用 content-language 属性 值 定义 页 面 语 言 的 代码 。 如 下 所 示 设 置 中 文 版 本 语言 : 
<meta http-equiv="content-language" content="zh-CN" /> 
使 用 refresh 属性 值 可 以 设置 页 面 刷新 时 间或 跳 转 页 面 ， 如 5 秒 钟 之 后 刷新 页 面 : 
<meta http-equiv="refresh" content="$5" /> 
5 秒 钟 之 后 跳 转 到 百度 首页 : 
| <meta http-equiv="refresh" content="$; url= https://www.baidu.com/" /> 
。 使 用 expires 属性 值 设置 网 页 缓存 时 间 : 
| <meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" /> 
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SLA | 
也 可 以 使 用 如 下 方式 设置 页 面 不 缓存 : | 
<meta http-equiv="pragma" content="no-cache" /> 
类 似 设置 还 有 : 
<meta name="author" content="https://www.baidu.comy/" /> <!-- 设 置 网 页 作者 --> 
<meta name="copyright" content=" https://www.baidu.com/" /> <!-- 设 置 网 页 版 权 --> 
<meta name="date" content="2019-01-12T20:50:30+00:00" /> <!-- 设 置 创建 时 间 --> 
<meta name="robots" content="none" /> <!-- 设 置 禁止 搜索 引擎 检索 --> 


2.1.3 ”定义 文档 视 口 | 
在 移动 Web 开发 中 ， 经 常会 遇 到 viewport ( 视 口 ) 问题， 就 是 浏览 器 显示 页 面 内 容 的 屏幕 区 域 。 Es 
一 般 移动 设备 的 浏览 器 默认 都 设置 一 个 <meta name="viewport"> 标 签 ， 定 义 一 个 虚拟 的 布局 视 口 , 用 | 
于 解决 早期 的 页 面 在 手机 上 显示 的 问题 。 | 
iOS、Android 基本 都 将 这 个 视 口 分 辨 率 设置 为 980px， 所 以 桌面 网 页 基本 能 够 在 手机 上 呈现 ， 只 | 
不 过 看 上 去 很 小 ， 用 户 可 以 通过 手动 缩放 网 页 进行 阅读 。 这 种 方式 用 户 体验 很 差 ， 建 议 使 用 <meta | 
name="viewport"> 标 签 设置 视图 大 小 。 | 
<meta name="viewport"> 标 签 的 设置 代码 如 下 : | 
<meta id="viewport” name="viewport"” content="width=device-width: initial-scale=].0: maximum-scale=1; | 
User-scalable=no:"> 


各 属性 说 明 如 表 2.2 所 示 。 





表 2.2 <meta name="viewport"> 标 签 的 设置 说 明 


正 整 数 或 device-width 
正 整数 或 device-height 


| 

maximum-scale 定义 放大 最 大 比例 ， 它 必须 大 于 或 等 于 minimum-scale 设置 
user-scalable yes/no 定义 是 否 允 许 用 户 手 动 缩放 页 面 ， 默 认 值 为 yes | 
| 


【示例 】 下 面 示例 在 页 面 中 输入 一 个 标题 和 两 段 文 本 ， 如 果 没有 设置 文档 视 口 ， 则 在 移动 设备 中 | 


所 呈现 效果 如 图 2.2 所 示 ， 而 设置 了 文档 视 口 之 后 ， 所 呈现 效果 如 图 2.3 所 示 。 | 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> | 
<title> 设 置 文档 视 口 </title> | 
<meta name="viewport" content="width=device-width. initial-scale=1"> | 
</head> 

<body> | 
<hl>width=device-width, initial-scale=1</h1l> | 
<p>width=device-width 将 layout viewport (布局 视 口 ) 的 宽度 设置 ideal viewport (理想 视 口 ) 的 宽度 。</p> ， 
<p>initial-scale=1 表示 将 layout viewport (布局 视 口 ) 的 宽度 设置 为 ideal viewport (理想 视 口 ) 的 宽度 ,</p> L 











可 
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| 
| 
| </html> 
| 


次 提示 : TE 


width=device- 
width, initial- 
scale=1 

Wih= gece-widthSlayou 


DD RA esl (8 


| 
| 

| 

| nat.scale=1 委 未 将 ayout viewport ( 布 

| 局 视 口 ) 的 宽度 设置 为 deal viewport ( 理 
| i 

| 


- > 


图 2.2 默认 被 缩小 的 页 面 视图 图 2.3 保持 正常 的 布局 视图 


2.1.4 最 新 head 指南 





本 节 为 线 上 拓展 内 容 ， 介 绍 2017 年 最 新 的 head 元 素 使 用 指南 。 本 节 内 容 相对 专 
业 ， 适 合 专业 开发 人 员 阅读 或 参考 ， 对 于 初级 读者 来 说 ， 建 议 有 选择 性 地 跳 读 ， 或 者 
作为 案头 参考 资料 ， 需 要 时 备查 使 用 。 详 细 内 容 请 扫 码 阅读 。 


本 节 为 线 上 拓展 内 容 ， 介 绍 移动 端 HTML5 head 头 部 信息 设置 说 明 。 本 节 内 容 
相对 专业 , 适合 专业 开发 人 员 阅 读 或 参考 , 对 于 初级 读者 来 说 , 建议 有 选择 性 地 跳 读 ， 
或 者 作为 案头 参考 资料 ， 需 要 时 备查 使 用 。 详 细 内 容 请 扫 码 阅读 。 


2.2 构建 网 页 通用 结构 





| HTML 文档 的 主体 部 分 包括 了 要 在 浏览 器 中 显示 的 所 有 信息 。 这 些 信 息 需 要 在 特定 的 结构 中 呈 
| 现 ， 下 面 介绍 网 页 通用 结构 的 设计 方法 。 


2.2.1 定义 文档 结构 


解 | HTML5 包含 一 百 多 个 标签 ， 大 部 分 继承 自 HIML4， 新 增加 30 个 标签 。 这 些 标签 基本 上 都 被 放 

| 置 在 主体 区 域 (<body>) 内 ， 我 们 将 在 各 章节 中 逐一 进行 说 明 。 

| 正确 选用 HIML5 标签 可 以 避免 代码 元 余 。 在 设计 网 页 时 不 仅 需 要 使 用 <div> 标 签 来 构建 网 页 通 
用 结构 ， 还 要 使 用 下 面 几 类 标签 完善 网 页 结构 。 
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回 


题 ， 常 用 标题 包括 一 级 、 二 级 和 三 级 。 

<p>: 定义 段落 文本 。 

<ul>、<ol>、<1i> 等 : 定义 信息 列表 、 导 航 列表 、 榜 单 结构 等 。 
<table>、<tr>、<td> 等 :定义 表格 结构 。 
<form>、<input>、<textarea> 等 : 定义 表单 结构 。 

<span>: 定义 行内 包含 框 。 


回回 回回 加 


【示例 】 下 面 示例 是 一 个 简单 的 HTML 页面， 使 用 了 少量 HIML 标签 。 它 演示 了 一 


档 应 该 包含 的 内 容 ， 以 及 主体 内 容 是 如 何在 浏览 器 中 显示 的 。 
第 1 步 ， 新 建文 本 文件 ， 输 入 下 面 代码 。 


<meta charset="utf-8"> 
<title> 一 个 简单 的 文档 包含 内 容 </title> 
</head> 


<body> 
<h1> 我 的 第 一 个 网 页 文档 <Jhl> 
<p>HTML 文档 必须 包含 三 个 部 分 : </p> 
<uUl> 


<li>html 一 一 网 页 包含 框 </li> 

<li>head 一 头 部 区 域 </li> 

<li>body 一 主体 内 容 </li> 
<hl> 


</html> 
第 2 步 ， 保 存 文本 文件 ， 命 名 为 test， 设 置 扩 展 名 为 .html。 


第 3 步 ， 使 用 浏览 器 打开 这 个 文件 ， 则 可 以 看 到 如 图 2.4 所 示 的 预览 效果 。 






<p> 定 义 的 信息 


<body> 包 含 框 






我 的 第 一 个 网 页 文档 


HTMIL 文 档 必 须 色 含 三 个 部 分 ， 





<1i> 定 义 的 信息 


2.4 网 页 文档 演示 效果 | 
为 了 更 好 地 选用 标签 ， 读 者 可 以 参考 w3school 网 站 的 http://www.w3school. com.cn/tags/index.asp | 
| 








页 面 信息 ,其 中 DTD 列 描述 标签 在 哪 一 种 DOCTYPE 文档 类 型 是 允许 使 用 的 : S=Strict, T=Transitional， 








F=Frameset。 
【 课 后 福利 】 
感 兴趣 的 读者 可 以 扫 码 查看 一 份 完整 的 HIML5 结构 模板 。 
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<hl>、<h2>、<h3>、<h4>、<h5>、<h6>: 定义 文档 标题 ，1 表示 一 级 标题 ，6 表示 六 级 标 | 





| 
个 简单 的 文 | 


A 从 入 门 到 精通 ( 微 课 精 编 版) 





2.2.2 使 用 div 和 span 





» | 文档 结构 基本 构成 元 素 是 div。div 表示 区 块 (division) 的 意思 ， 通 过 将 指定 结构 内 容 包 围 在 div 
色 ”中 ， 并 分 配 i4 或 class， 就 可 以 在 文档 中 添加 有 意义 的 结构 。 
| 【示例 1】 为 了 减少 不 必要 的 标签 ， 应 该 避免 随意 嵌 套 。 例 如 ， 在 设计 导航 列表 时 ， 就 没有 必要 
2. 贡 将 <ul> 再 包 事 一 层 <div> 标 签 。 
| IE 
<ul> 
<li><a href="#"> 首 页 </a></li> 
| <li><a href="#"> 关 于 </a></li> 
| <li><a hre 人 =" 六" > 联系 </a></li> 
| <lul> 
</div> 
可 以 完全 删除 div， 直 接 在 ul 上 设置 id。 
| <ul id="nav"> 
| <li><a hre 伍 "#"> 首 页 </a></li> 
| <li><a hre 人 ="#"> 关 于 </a></li> 
<li><a hre 伍 "#> 联 系 </a></li> 
</ul> 
| 过 度 使 用 div 是 结构 不 合理 的 一 种 表现 ， 也 容易 造成 结构 复杂 化 。 
| 与 div 不 同 ，span 元 素 可 以 用 来 对 行内 元 素 进行 分 组 。 
| 【示例 2】 在 下 面 代码 中 为 段落 文本 中 部 分 信息 进行 分 隔 显示 ， 以 便 应 用 不 同 的 类 样式 。 
| <hl> 新 闻 标 题 <hl> 
| <p> 新 闻 内 容 </p> 





| <p> 
| <p> 发 布 于 <span class="date">2016 年 12 月 </span>， 由 <span class="author"> 张 三 </span> 编 辑 </p> 
| 


| 对 行内 元 素 进 行 分 组 的 情况 比较 少 ， 所 以 使 用 span 的 频率 没有 div 多 。 一 般 应 用 类 样式 时 才 会 
| 用 到 。 


2.2.3 使 用 id 和 class 


HTML 是 简单 的 文档 标识 语言 ， 而 不 是 界面 语言 。 文 档 结构 大 部 分 使 用 <div> 标 签 来 完成 ， 为 
了 能 够 识别 不 同 的 结构 , 一 般 通过 定义 id 或 class 给 它们 赋予 额外 的 语义 , 给 CSS 样式 提供 有 效 的 
< 钩子 " 
【示例 1】 构 建 一 个 简单 的 列表 结构 ， 并 给 它 分 配 一 个 id， 自 定义 导航 模块 。 
<ulid="nav"> 
<li><a hre 仁 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 关 于 </a></li> 
<li><a hre 伍 "#> 联 系 </a></li> 
</ul> 


使 用 id 标识 页 面 上 的 元 素 时 ，id 名 必须 是 唯一 的 。id 可 以 用 来 标识 持久 的 结构 性 元 素 ， 例 如 主 
」 导航 或 内 容 区 域 ， 这 还 可 以 用 来 标识 一 次 性 元 素 ， 如 某 个 链接 或 表单 元 素 。 
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在 整个 网 站 上 ，id 名 应 该 应 用 于 语义 相似 的 元 素 以 避免 混淆 。 例 如 ， 如 果 联 系 人 表单 和 联系 人 详 | 


细 信 息 在 不 同 的 页 面 上 ， 那 么 可 以 给 它们 分 配 同样 的 id 名 contact， 但 是 如 果 在 外 部 样式 表 中 给 它们 
定义 样式 ， 就 会 遇 到 问题 ， 因 此 使 用 不 同 的 id 名 (如 contact form 和 contact_details) 就 会 简单 得 多 。 

与 id 不 同 ， 同 一 个 class 可 以 应 用 于 页 面 上 任意 数量 的 元 素 ， 因 此 class 非常 适合 标识 样式 相同 
的 对 象 。 例 如 ， 设 计 一 个 新 闻 页 面 ， 其 中 包含 每 条 新 闻 的 日 期 。 此 时 不 必 给 每 个 日 期 分 配 不 同 的 id， 
而 是 可 以 给 所 有 日 期 分 配 类 名 date。 


容 提示: id 和 class 的 名 称 一 定 要 保持 语义 性 ， 并 与 表现 方式 无 关 。 例 如 ， 可 以 给 导航 元 素 分 配 id 
名 为 right_nav， 因 为 希望 它 出 现在 右边 。 但 是 ， 如 果 以 后 将 它 的 位 置 改 到 左边 ,那么 CSS 
和 HTML 就 会 产生 歧义 。 所 以 ， 将 这 个 元 素 命名 为 sub nav 或 nav_ main 更 合适 。 这 种 名 
称 解释 就 不 再 涉及 如 何 表现 它 。 
对 于 class 名 称 , 也 是 如 此 。 例 如， 如果 定义 所 有 错误 消息 以 红色 显示 ， 不 要 使 用 类 名 red， 
而 应 该 选择 更 有 意义 的 名 称 ， 如 error 或 feedback。 


< 所 注意 ;class 和 id 名 称 需要 区 分 大 小 写 ， 虽 然 CSS 不 区 分 大 小 写 ， 但 是 在 标签 中 是 否 区 分 大 小 写 | 


取决 于 HTML 文档 类 型 。 如 果 使 用 XHTML 严谨 型 文档 ， 那 么 class 和 这 名 是 区 分 大 小 | 


写 的 。 最 好 的 方式 是 保持 一 致 的 命名 约定 , 如 果 在 HTML 中 使 用 驼峰 命名 法 , 那么 在 CSS 
中 也 采用 这 种 形式 。 


【示例 2 在 实际 设计 中 ，class 被 广泛 使 用 ， 这 就 容易 产生 滥用 现象 。 例如， 很 多 初学 者 在 所 有 
的 元 素 上 添加 类 ， 以 更 方便 地 控制 它们 。 这 种 现象 被 称 为 “多 类 症 ”， 在 某 种 程度 上 ， 这 和 使 用 基于 
表格 的 布局 一 样 糟 糕 ， 因 为 它 在 文档 中 添加 了 无 意义 的 代码 。 

<hl class="newsHead"> 标 题 新 闻 </h1> 

<p class="newsText"> 新 闻 内 容 </p> 


<p class="newsText"><a href="news.php" class="newsLink"> 更 多 </a></p> 
【示例 3】 在 上 面 示例 中 ， 每 个 元 素 都 使 用 一 个 与 新 闻 相 关 的 类 名 进行 标识 。 这 使 新 闻 标 题 和 正 
文 可 以 采用 与 页 面 其 他 部 分 不 同 的 样式 。 但 是 ， 不 需要 用 这 么 多 类 来 区 分 每 个 元 素 。 可 以 将 新 闻 条 目 
放 在 一 个 包含 框 中 ， 并 加 上 类 名 news， 从 而 标识 整个 新 闻 条 目 。 然 后 ， 可 以 使 用 包含 框 选 择 器 识别 
新 闻 标 题 或 文本 。 
<div class="news"> 
<hl> 标 题 新 闻 <hl> 
<p> 新 闻 内 容 </p> 


和 
</div> 
以 这 种 方式 删除 不 必要 的 类 有 助 于 简化 代码 ， 使 页 面 更 简洁 。 过 度 依赖 类 名 是 不 必要 的 ， 我 们 只 
需要 在 不 适合 使 用 id 的 情况 下 对 元 素 应 用 类 ， 而 且 尽 可 能 少 使 用 类 。 实 际 上 ， 创 建 大 多 数 文档 常常 
只 需要 添加 几 个 类 。 如 果 初学 者 发 现 自己 添加 了 许多 类 ， 那 么 这 很 可 能 意味 着 自己 创建 的 HTML 文 
档 结构 有 问题 。 


。21 。 


| 
| 
| 
\ 


Note 
轩 | 








E LA 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


2.3 构建 HIMLS 新 结构 


HTMLS 新 增多 个 结构 化 元 素 ， 以 方便 用 户 创建 更 友好 的 页 面 主体 框架 ， 下 面 来 详细 学 习 。 
2.3.1 定义 文章 块 


article 表示 文章 ， 用 来 标识 页 面 中 一 块 完整 的 、 独 立 的 、 可 以 被 转发 的 内 容 。 例 如 ， 报 纸 文章 、 

论坛 帖子 、 用 户 评论 、 博 客 条 目 等 。 

痊 提示 : 一 些 交 互 式 小 部 件 或 小 工具 ， 或 任何 其 他 可 独立 的 内 容 ， 原 则 上 都 可 以 作为 article 块 ， 如 
日 期 选择 器 组 件 ， 但 这 些 内 容 不 是 HTML5 新 增 article 元 素 的 主要 目的 ， 故 不 建议 使 用 。 


【示例 1】article 内 容 块 通常 包含 标题 ， 放 在 header 元 素 里 面 ， 有 时 还 包含 footer， 定 义 附加 信 
息 。 下 面 示 例 演 示 了 如 何 使 用 article 设计 一 篇 新 闻 稿 。 
<article> 
<header> 


<h1> 首 届 Web 高 层 论坛 (Web Executive Forum) 将 于 2017 年 11 月 在 美国 旧金山 举行 </hl> 
<time pubdate="pubdate">2017 年 9 月 26 日 消息 </time> 


</header> 

<p>W3C 将 于 2017 年 11 月 8 日 在 美国 加 州 旧金山 举行 首届 W3C Web 高 层 论坛 (Web Executive Forum )， 
来 自 支付 宝 (Alipay)、 美 国运 通 (American Express)、 彭 博 (Bloomberg)、 哈 曼 HARMAN)、 众 歌 (Google)、 
英特尔 (Intel)、Mozilla、 三 星 (Samsung)、 南 内 华 达 地 区 交通 局 (Southern Nevada Regional Transportation Agency)、 
悉尼 大 学 (University of Sydney)、Worldpay、Yubico 等 机 构 的 代表 将 与 W3C 的 发 明 人 、W3C 理事 长 Tim Berners 
Lee 一 起 , 探讨 Web 的 技术 趋势 及 对 行业 产业 的 影响 。 这 是 W3C 首次 举办 此 类 论坛 , 论坛 将 与 W3C TPAC 2017 
会 议 同期 举行 。</p> 

<footer> 

<p> 来 自 <a href="http://www.chinaw3c.org/archives/1980/" target="” blank">W3C 中 国 </a></p> 
</footer> 
</article> 


上 面 示例 是 一 篇 互联 网 新 闻 的 文章 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 这 部 分 中 ， 文 
章 的 标题 被 镶嵌 在 hl 元 素 中 ， 文 章 的 发 表 日 期 镶嵌 在 time 元 素 中 。 在 标题 下 部 的 p 元 素 中 嵌入 了 一 
大 段 文章 的 正文 ， 在 结尾 处 的 footer 元 素 中 作为 脚注 ， 嵌 入 了 文章 的 来 源 。 整 个 文章 块 的 内 容 相对 比 


| 较 独 立 、 完 整 ， 因 此 对 这 部 分 内 容 使 用 了 article 元 素 。 





【示例 2】article 元 素 可 以 翌 套 使 用 ， 原 则 上 内 层 的 内 容 要 与 外 层 的 内 容 相 关联 。 例 如 ， 在 一 篇 
互联 网 新 闻 中 , 针对 该 新 闻 的 相关 评论 就 可 以 使 用 嵌 套 article 元 素 设计 ,用 来 呈现 评论 的 article 元 素 
被 包含 在 外 层 article 元 素 里 面 。 

<article> 
<header>[ 省 略 ]</header> 
<p>[ 请 参考 示例 1]</p> 
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<header> 
<h3> 网 友 昵 称 1</h3> 


<time pubdate datetime="2017-9-26 19:40-08:00"> 1 小 时 前 </time> 





</article> 
<article>[ 参 考 第 一 条 评论 的 结构 ]</article> | 
<article>[ 每 条 评论 作为 一 个 相对 独立 的 内 容 块 ]</article> | 
<article>[ 内 层 article 块 与 外 层 article 块 相关 联 ]</article> | 


上 面 示例 的 内 容 比 示例 1 的 内 容 更 加 丰富 ， 它 添加 了 评论 内 容 。 有 具体 来 说 ，section 把 正文 与 评论 | 
部 分 进行 了 区 分 ， 在 section 元 素 中 嵌入 了 评论 的 内 容 ， 评 论 中 每 个 人 的 评论 相对 来 说 又 是 比较 独立 、 | 
完整 的 ， 因 此 每 条 评论 都 使 用 一 个 article， 在 评论 中 又 可 以 分 为 标题 和 评论 内 容 两 个 部 分 ， 分 别 放 在 | 
header 元 素 与 p 元 素 中 。 | 


2.3.2 ”定义 区 块 


section 表示 区 块 ， 用 于 标识 文档 中 的 节 ， 在 页 面 上 多 对 内 容 进 行 分 区 。 例 如 ， 章 节 、 页 眉 、 页 脚 | 
或 文档 中 的 其 他 部 分 。 
【辨析 】 
div 元 素 也 可 以 用 来 对 页 面 进行 分 区 ,但 section 元 素 并 非 一 个 普通 的 容器 。 当 一 个 容器 需要 被 直 
接 定义 样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div， 而 非 section 元 素 。 | 
div 元 素 关注 结构 的 独立 性 ,而 section 元 素 关注 内 容 的 独立 性 ，section 元 素 包含 的 内 容 可 以 单独 | 
存储 到 数据 库 中 ， 或 输出 到 Word 文档 
【示例 1】 一 个 section 区 块 通常 由 标题 和 内 容 组 成 。 下 面 示例 使 用 section 元 素 包 庄 排行 版 的 内 
容 ， 作 为 一 个 独立 的 内 容 块 进行 定义 。 
<section cite="http://music.baidu.com/"> 
<h1> 新 歌 榜 </h1> 
<ol> | 
<li><a hre 仁 "加 > 和 爸爸 去 哪儿 <p class="ui-li-aside"> 群星 </p></a></li> | 
<li><a hre 伟 "#i> 爱 ， 不 解释 <p class="ui-li-aside"> 张杰 </p></a></li> | 
<li><a hre 伍 "#"> 爱 无 反 顾 <p class="ui-li-aside"> 姚 贝 娜 </p></a></li> | 
<li><a hre 仁 "加 > 房间 <p class="ui-li-aside"> 刘 瑞 琦 </p></a></li> 
<li><a hre 人 ="#'> 动 人 的 传说 <p class="ui-li-aside"> 杭 娇 </p></a></li> 
<li><a hre 伍 "#> 泼 墨 <p class="ui-li-aside"> 周华健 </p></a></li> | 
<li><a hre 人 ="#> 一 起 摇摆 <p class="ui-li-aside"> 汪峰 </p></a></li> | 
<li><a hre 伍 "加 > 就 当 是 你 <p class="ui-li-aside"> 许诺 </p> </a></li> | 
<li><a hre 仁 "#">summer time<p class="ui-li-aside"> 吉 克 集 逸 </p></a></li> 
<li><a hre 伍 "#"> 不 值得 <p class="ui-li-aside"> 曾 一 鸣 </p></a></li> 
</ol> 
</section> 


| 
| 
section 元 素 包含 cite 属性 ， 用 来 定义 section 的 URL。 如 果 section 摘自 Web， 可 以 设置 该 属性 。 国 








昌 











。23 。 


& ee 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


【辨析 】 
article 和 section 都 是 HTMLS5 新 增 的 元 素 ， 它 们 都 是 用 来 区 分 不 同 内容 ， 用 法 也 相似 ， 从 语义 角 
度 分 析 两 者 区 分 很 大 。 





article 代表 文档 、 页 面 或 者 应 用 程序 中 独立 、 完 整 的 ， 可 以 被 外 部 引用 的 内 容 。 因 为 article 
是 一 段 独立 的 内 容 ， 所 以 article 通常 包含 header 和 footer 结构 。 
section 用 于 对 网 站 或 者 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 一 个 section 通常 由 内 容 和 标题 
组 成 。 因 此 ， 需 要 包含 一 个 标题 ， 一 般 不 用 包含 header 或 者 footer 结构 。 
通常 使 用 section 元 素 为 那些 有 标题 的 内 容 进 行 分 段 ， 类 似 文章 分 段 操 作 。 相 邻 的 section 内 容 应 
当 是 相关 的 ， 而 不 像 article 之 间 各 自 独立 。 
【示例 2】 下 面 示例 混用 article 和 section 元 素 , 从 语义 上 比较 两 者 不 同 。article 内 容 强 调 独立 性 、 
完整 性 ，section 内 容 强 调 相 关 性 。 
<article> 
<header> 
<h1> 蝶 恋 花 </h1l> 
<h2> 胺 殊 </h2> 
</header> 
<p> 槛 菊 悉 烟 兰 注 露 ， 罗 幕 轻 寒 ， 燕 子 双飞 去 。 明 月 不 语 离 恨 苗 ， 斜 光 到 晓 穿 朱 户 。</p> 
<p> 昨 夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 。 欲 寄 彩 签 兼 尺 素 ， 山 长 水 阔 知 何 处 。</p> 
<section> 
<h2> 解 析 </h2> 
<article> 
<h3> 注 释 </h3> 
<p> 槛 : 栏杆 。</p> 
<p> 罗 幕 : 丝 罗 的 帷幕 ， 富 贵人 家 所 用 。</p> 
<p> 朱 户 : 狂言 朱 门 ， 指 大 户 人 家 。</p> 
<p> 尺 素 : 书信 的 代称 。</p> 
</article> 
<article> 
<h3> 评 析 </h3> 
<p> 此 词 经 疏 渔 的 笔墨 、 温 婉 的 格调 、 说 严 的 章法 ， 传 达 出 作者 的 暮 秋 怀 人 之 情 。 </p> 
<p> 上 片 由 苑 中 景物 起 笔下 片 写 登楼 望 远 。 以 无 可 奈何 的 帐 问 作 结 ， 给 人 情 也 悠悠 、 恨 也 悠 
悠 之 感 。 </p> 
</article> 
</section> 
</article> 


【追问 】 

既然 article、section 是 用 来 划分 区 域 的 ， 又 是 HTML5 的 新 元 素 , 那么 是 否 可 以 用 article、section 
取代 div 来 布局 网 页 呢 ? 

答案 是 否定 的 ，div 的 用 处 就 是 用 来 布局 网 页 ， 划 分 大 的 区 域 ， 所 以 我 们 习惯 性 地 把 div 当成 了 








| 一 个 容器 。 而 HTMLS5 改变 了 这 种 用 法 ， 它 让 div 的 工作 更 纯正 。div 就 是 用 来 布局 的 ， 在 不 同 的 内 容 


块 中 ， 我 们 按照 需求 添加 article、section 等 内 容 块 ， 并 且 显 示 其 中 的 内 容 ， 这 样 才 是 合理 地 使 用 这 些 
元 素 。 
因此 ， 在 使 用 section 元 素 时 应 该 注意 几 个 问题 : 
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不 要 将 section 元 素 当 作 设 置 样式 的 结构 容器 ， 对 于 此 类 操作 应 该 使 用 div 元 素 实 现 。 | 
如 果 article、aside 或 nav 元 素 更 符合 语义 使 用 条 件 ， 不 要 首选 使 用 section 元 素 。 
不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 
【补充 】 | 
使 用 HTML5 大 纲 工具 http://gsnedders.html5.org/outliner/〉 来 检查 页 面 中 是 否 有 没有 标题 的 
section， 如 果 使 用 该 工具 进行 检查 后 ， 发 现 某 个 section 的 说 明 中 有 “untitiled section”( 没 有 标题 的 
section) 文字 ， 这 个 section 就 有 可 能 使 用 不 当 ， 但 是 nav 元 素 和 aside 元 素 没有 标题 是 合理 的 。 | 
【示例 3】 下 面 示例 进一步 描述 了 article 和 section 混用 的 情景 。 | 
<article> 
<hl>W3C</hl> 
<p> 万 维 网 联盟 (World Wide Web Consortium，W3C)， 又 称 W3C 理事 会 。1994 年 10 月 在 麻 省 理工 学 
院 计 算 机 科学 实验 室 成 立 。 建 立 者 是 万 维 网 的 发 明 者 蒂 姆 &middot' 伯 纳 斯 - 李 。</p> 
<h2>CSS</h2> 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 "风格 样式 表 (Style Sheet) "， 它 是 用 来 ， 
进行 网 页 风格 设计 的 。</p> | 
</section> | 
<section> | 
| 
1 





<h2>HTML</h2> 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 
</section> 
</article> 
在 上 面 示 例 中 ， 首 先 可 以 看 到 整个 版 块 是 一 段 独立 的 、 完 整 的 内 容 ， 因 此 使 用 article 元 素 标识 。 
该 内 容 是 一 篇 关于 W3C 的 简介 ,该 文章 分 为 3 段 ,每 一 段 都 有 一 个 独立 的 标题 ,因此 使 用 了 两 个 section 
元 素 区 分 。 
【追问 】 
为 什么 没有 对 第 一 段 使 用 section 元 素 呢 ? 
其 实 是 可 以 使 用 的 ， 但 是 由 于 其 结构 比较 清晰 ， 浏 览 器 能 够 识别 第 一 段 内 容 在 一 个 section 内 ， 
所 以 也 可 以 将 第 一 个 section 元 素 省 略 ， 但 是 如 果 第 一 个 section 元 素 里 还 要 包含 子 section 元 素 或 子 
article 元 素 ， 那 么 就 必须 标识 section 元 素 。 
【示例 4】 下 面 是 一 个 包含 article 元 素 的 section 元 素 示例 。 
<section> 
<hl>W3C</hl> 
<article> 
<h2>CSS</h2> | 
<p> 全 称 Cascading Style Sheet， 级 联 样式 表 ， 通 常 又 称 为 "风格 样式 表 (Style Sheet) "， 它 是 用 来 ， 
进行 网 页 风格 设计 的 。</p> | 
</article> | 
<h2>HTML</h2> | 
<p> 全 称 Hypertext Markup Language， 超 文本 标记 语言 ， 用 于 描述 网 页 文档 的 一 种 标记 语言 。</p> 
</section> 
这 个 示例 比 示例 1 复杂 了 一 些 。 首先 , 它 是 一 篇 文章 中 的 一 段 , 因此 没有 使 用 article 元 素 。 但 是 ， 
在 这 一 段 中 有 几 块 独立 的 内 容 ， 所 以 嵌入 了 几 个 独立 的 article 元 素 。 
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在 HTML5 中 ，article 可 以 是 一 种 特殊 功能 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 

section 元 素 强调 分 段 或 分 块 ， 而 article 强调 独立 性 。 具 体 来 说 ， 如 果 一 块 内 容 相 对 来 说 比较 独立 、 完 

整 的 时 候 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 将 一 块 内 容 分 成 几 段 的 时 候 ， 应 该 使 用 section 元 素 。 

| 在 HIML5 中 ，div 变 成 了 一 种 容器 ， 当 应 用 CSS 样式 的 时 候 ， 可 以 对 这 个 容器 进行 一 个 总 体 的 

| CSS 样式 的 套用 。 因 此 ， 可 以 将 页 面 的 所 有 从 属 部 分 ， 如 导航 条 、 菜 单 、 版 权 说 明 等 ， 包 含 在 一 个 统 

一 的 页 面 结构 中 ， 以 便 统一 使 用 CSS 样式 来 进行 装饰 。 


| 2.3.3 ”定义 导航 条 


nav 表示 导航 条 ， 用 来 标识 页 面 导航 的 链接 组 。 一 个 页 面 中 可 以 拥有 多 个 nav， 作 为 页 面 整体 或 

| 不 同 部 分 的 导航 。 具 体 应 用 场景 如 下 : 

| 回 主 莱 单 导航 。 一 般 网 站 都 设置 有 不 同 层级 的 导航 条 ， 其 作用 是 在 站 内 快速 切换 ， 如 主 菜 单 、 
置顶 导航 条 、 主 导航 图 标 等 。 

回 ” 侧 边栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 文章 
或 当前 商品 跳 转 到 相关 文章 或 商品 页 面 上 去 。 

| 加 ”页 内 导航 。 就 是 页 内 锚 点 链接 ， 其 作用 是 在 本 页 面 几 个 主要 的 组 成 部分 之 间 进 行 跳 转 。 

”名 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 

| 并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 中 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 可 。 

| 例如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 footer 元 素 是 最 

| 恰当 的 。 

| 

| 

| 





| 【示例 1】 在 HIML5 中 ， 只 要 是 导航 性 质 的 链接 ， 我 们 就 可 以 很 方便 地 将 其 放 入 nav 元 素 中 。 
| 该 元 素 可 以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 


<nav draggable="true"> 

<a hre 伍 "index.html"> 首 页 </a> 
| <a hre 伍 "book.html"> 图 书 </a> 
| <a hre 伍 "bbs.html"> 论 坛 </a> 
| </nav> 








上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 , nav 元 素 中 包含 了 三 个 用 于 导航 的 超 链接 ， 即 “首页 ” 

“图 书 ”“ 论 坛 "。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 
【示例 2】 下面 示例 页 面 由 多 部 分 组 成 ， 每 部 分 都 带 有 和 链接， 但 只 将 最 主要 的 链接 放 入 了 nav 元 

素 中 。 

<h1> 技 术 资料 </h1> 

<nav> 

<ul> 

| <li><a href="/"> 主 页 </a></li> 
| <li><a href="/blog"> 博 客 </a></li> 
| 
| 


</nav> 


| <h1>HIMLS+CSS3</h1> 
| <nav> 
| <Ul> 

<li><a href="#HTML5">HTMLS </a></li> 
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<li><a href="#CSS3">CSS3</a></li> 
</ul> 
</nav> 
</header> 
<section id="HTMLS"> 
<hl>HTML5</hl> 
<p>HTML5 特性 说 明 </p> 
</section> 
<section id="CSS3"> | 
<h1l>CSS3</hl> | 
<p>CSS3 特性 说 明 。</p> 
</section> 
<footer> 
<p> <a href-"?edit"> 编 辑 </a> | <a hre 伍 "?delete"> 删 除 </a> | <a hre 仁 "?add"> 添 加 </a> </p> 
</footer> 
</article> 
<footer> 
<p><small> 版 权 信息 </small></p> 
</footer> 
在 这 个 例子 中 ， 第 一 个 nav 元 素 用 于 页 面 导航 ， 将 页 面 跳 转 到 其 他 页 面 上 去 ， 如 跳 转 到 网 站 主页 | 


或 博客 页 面 ， 第 二 个 nav 元 素 放 置 在 article 元 素 中 ， 表 示 在 文章 内 进行 导航 。 除 此 之 外 ，nav 元 素 也 | | 
可 以 用 于 其 他 所 有 你 觉得 是 重要 的 、 基 本 的 导航 链接 组 中 。 


< 负 注意 : 不 要 用 menu 元 素 代替 nav 元 素 。menu 主要 用 在 一 系列 交互 命令 的 菜单 上 ， 如 快捷 菜单 。 





2.3.4 定义 边栏 


aside 表示 侧 边 ， 用 来 标识 所 处 内 容 之 外 的 内 容 。aside 内 容 应 该 与 所 处 的 附近 内 容 相关 。 例 如 ， 
当前 页 面 或 文章 的 附属 信息 部 分 , 它 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边 广告 、 导 航 条 ， 
以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 
aside 元 素 主要 有 两 种 用 法 : 
加 ”作为 主体 内 容 的 附属 信息 部 分 ， 包 含 在 article 中 ，aside 内 容 可 以 是 与 当前 内 容 有 关 的 参考 
资料 、 名 词 解释 等 
【示例 1】 F 面 示例 设计 一 篇 文章 ， 文 章 标题 放 在 header 中 ， 在 header 后 面 将 所 有 关于 文章 的 部 | | 
分 放 在 了 一 个 article 中 ,将 文章 正文 放 在 一 个 p 元 素 中 。 该 文章 包含 一 个 名 词 注释 的 附属 部 分 ， 因 此 | 
在 正文 下 面 放置 了 一 个 aside 元 素 ， 用 来 存放 名 词 解释 的 内 容 。 
<header> | 
<hl>HTIML5</hl> 
</header> | 
<article> | 
<h1>HTMLS 历史 <h1> | 
<p>HTMLS5 草案 的 前 身 名 为 Web Applications 1.0, 于 2004 年 被 WHATWG 提出 , 于 2007 年 被 W3C 接 ， 
纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HTMLS 的 第 一 份 正式 草案 已 于 2008 年 1 月 22 日 公布 。2014 年 10 月 28 | 
日 ，W3C 的 HTML 工作 组 正式 发 布 了 HIMLS 的 官方 推荐 标准 。</p> 
<aside> 
<h1> 名 词 解释 </h1> 
<d> 
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<dt>WHATWG</dt> 
<dd>Web Hypertext Application Technology Working Group，HTML 工作 开发 组 的 简称 ， 目 前 与 


| 
| W3C 组 织 同时 研发 HTML5。</dd> 


| </d> 

SA 

YY | <d>W3C</d> 

<dd>World Wide Web Consortium， 万 维 网 联盟 ， 万 维 网 联盟 是 国际 著名 的 标准 化 组 织 。1994 
| 年 成 立 后 ， 至 今 已 发 布 近 百 项 相关 万 维 网 的 标准 ， 对 万 维 网 发 展 做 出 了 杰出 的 贡献 。</dd> 
| </d> 
| </aside> 
</article> 


| 这 个 aside 被 放置 在 一 个 article 内 部 ， 因 此 引擎 将 这 个 aside 内 容 理 解 为 与 article 内 容 相关 联 的 。 
| 加 ”作为 页 面 或 站 点 辅助 功能 部 分 ,在 article 之 外 使 用 。 最 典型 的 形式 是 侧 边 栏 ， 其 中 的 内 容 可 
| 以 是 友情 链接 、 最 新 文章 列表 、 最 新 评论 列表 、 历 史 存档 、 日 历 等 。 
【示例 2】 下 面 代码 使 用 aside 元 素 为 个 人 博客 添加 一 个 友情 链接 辅助 版 块 。 
| <aside> 
| <nav> 
| <h2> 友 情 链 接 </h2> 
| <u> 
<li> <a hre 伍 "#"> 网 站 1</a></li> 
<li> <a hre 伍 "#> 网 站 2</a></li> 
<li> <a hre 伍 "#"> 网 站 3</a></li> 
</ul> 
</nav> 
</aside> 


| 友情 链接 在 博客 网 站 中 比较 常见 ， 一 般 放 在 左右 两 侧 的 边栏 中 ， 因 此 可 以 使 用 aside 来 实现 ， 但 
| 是 这 个 版 块 又 具有 导航 作用 ， 因 此 堪 套 了 一 个 nav 元 素 ， 该 侧 边 栏 的 标题 是 “友情 链接 ”， 放 在 了 h2 
| 元 素 中 ， 在 标题 之 后 使 用 了 一 个 UL 列表， 用 来 存放 具体 的 导航 链接 列表 。 


2.3.5 ”定义 主要 区 域 


main 表示 主要 ， 用 来 标识 网 页 中 的 主要 内 容 。main 内 容 对 于 文档 来 说 应 当 是 唯一 的 ， 它 不 应 包 
| 会 在 网 页 中 重复 出 现 的 内 容 ， 如 侧 栏 、 导 航 栏 、 版 权 信 息 、 站 点 标志 或 搜索 表单 等 。 

简单 来 说 , 在 一 个 页 面 中 , 不 能 出 现 一 个 以 上 的 main 元 素 . main 元 素 不 能 被 包 庄 在 article、 aside、 
| footer、header 或 nav 中 。 


容 提示 : 由 于 main 元 素 不 对 页 面 内 容 进行 分 区 或 分 块 ， 所 以 不 会 对 网 页 大 岗 产 生 影 响 . 


【示例 】 下 面 示例 使 用 main 元 素 包 里 页 面 主要 区 域 ， 这 样 更 有 利于 网 页 内 容 的 语义 分 区 ， 同 时 
搜索 引擎 也 能 够 主动 抓 取 主 要 信息 ， 避 免 被 次 要 信息 干扰 。 








<li><a hre 人 ="#> 站 内 新 闻 </a></li> 


| 

| <li><a hre 仁 "#"> 首 页 </a></li> 

| 

| <li><a re 人 ="#'> 站 外 新 闻 </a></li> 
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Al> 
</nav> 


| 
</header> | 
| 


<main> y 
<h1> 站 内 新 闻 </h1> 量 会 座 
| 届 ~ 


ote 
<li><a href="#">HTML5</a></li> 


<li><a href="#">CSS3</a></li> | 
<li><a href="#">JavaScript</a></li> | 
</ul> | 
</nav> 
<H2 id="web">W3C</H2> | 
<h3>W3C 中 国 区 会 员 沙 龙 在 北京 航空 航天 大 学 举行 </h3> | 
<p>2017 年 9 月 14 日 ，W3C 在 北京 航空 航天 大 学 举办 了 中 国 区 会 员 沙 龙 活动 ， 向 到 会 的 中 国 区 会 员 代 | 
表 介绍 W3C 目前 标准 工作 进展 及 计划 , 并 提供 一 个 新 老 朋 友 参 与 W3C 及 其 他 相关 话题 问答 与 互动 讨论 的 交流 | | 
平台 。</p> | 
<h2 id="new"> 最 新 新 闻 </h2> 
<ul> 





<li>W3C 发 布 ODRL 信息 模型 .ODRL 词汇 表 及 表达 两 份 候选 推荐 标准 征集 参考 实现 及 审阅 意见 | 


<li>W3C 技术 研讨 会 ，Web 虚拟 现实 编著 一 机 遇 与 挑战 </li> 
<li>W3C 发 布 核心 无 障碍 API 映射 Core-AAM) 1.1 版 候选 推荐 标准 征集 参考 实现 </li> 
<hl> 
<h2 id="blog">W3C 官方 博客 </h2> 
<ul> 
<li>W3C 启动 WebAssembly 工作 组 </li> 
<li>W3C 数据 的 未 来 方向 </li> 
<li>W3C 数字 出 版 主要 进展 </li> 
<hl> | 
</main> | 
<footer> 本 站 由 北京 航空 航天 大 学 (W3C/Beihang) 维 护 京 ICP 备 05004617-3 文保 网 安 备案 号 | 
1101080018</footer> | . 






2.3.6 ”定义 标题 栏 


| 国 
header 表示 页 眉 ， 用 来 标识 页 面 标题 栏 。header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 | 视频 讲解 
常用 来 放置 整个 页 面 ， 或 者 一 个 内 容 块 的 标题 。 | 
header 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 表 单 或 相关 的 LOGO 信息 ， 一 般 整 个 页 面 的 标题 应 | 
该 放 在 页 面 的 前 面 。 | 
【示例 1 在 一 个 网 页 内 可 以 多 次 使 用 header 元 素 ， 下 面 示例 显示 为 每 个 内 容 区 块 添加 一 个 | 


| 
header。 | 
| 





<header> 
<hl> 网 页 标题 <hl> 

</header> 

<article> 


<h1> 文 章 标题 </h1> 
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| </header> 
| <p> 文 章 正文 <Ip> 
| </article> 
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全 内 | 在 HIMLS 中 ,header 内 部 可 以 包含 hl 一 h6 元 素 , 也 可 以 包含 hgroup、table、form、nav 等 元 素 ， 
Pe 只 要 应 该 显示 在 头 部 区 域 的 标签 ， 都 可 以 包含 在 header 元 素 中 。 
【示例 2】 下 面 示例 是 个 人 博客 首页 的 头 部 区 域 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 。 
| <header> 

<hgroup> 

<hl>LOGO</h1l> 
| <a href="#">[URL]</a> <a hre 伍 "#">[ 订 阅 ]</a> <a hre 伍 "#">[ 手 机 订阅 ]</a> </hgroup> 
| <nav> 
| <u> 
| 








<I 这 首页 </li> 

<li><a hre 伍 "#"> 目 录 </a></li> 
<li><a href="#"> 社 区 </a></li> 
<li><a hre 伍 "#"> 微 博 我 </a></li> 





2.3.7 ”定义 标题 组 


视频 讲解 | hgroup 表示 标题 分 组 ， 用 来 为 标题 或 子 标题 进行 分 组 。 通常 hgroup 与 hl 一 h6 元 素 组 合 使 用 ， 
| 个 内 容 块 中 的 标题 及 其 子 标题 可 以 通过 hgroup 组 成 一 组 。 但 是 ， 如 果 文章 只 有 一 个 主 标题 ， 则 不 需 
| 要 hgroup 元 素 。 注 意 ，W3C 将 hgroup 的 元 素 从 HTML5.1 规范 中 移 除 ， 不 再 建议 使 用 。 
| 【示例 】 下 面 示例 显示 如 何 使 用 hgroup 元 素 把 主 标题 、 副 标题 和 标题 说 明 进 行 分 组 ， 以 便 让 引 
| 擎 更 容易 识别 标题 块 。 
| <article> 
| <header> 


<hgroup> 
<h1> 首 届 Web 高 层 论坛 将 于 2017 年 11 月 在 美国 旧金山 举行 <hl> 
| <h2>September 26, 2017</h2> 
| <h3> 国 际 新 闻 .TPAC 及 AC. 博 客 文章 .技术 活动 </h3> 
| </heroup> 


</header> 
<p> 本 次 论坛 的 议程 包括 一 系列 圆桌 讨论 (Panel Discussion) 和 高 端 对 话 : </p> 
<ul> 
| <li>Web 支付 的 未 来 (Future of Payments on the Web)》</li> 
| <li> 网 联 汽车 、 城 市 和 Web (Connected Cars、Cities and Web)》</li> 
| <li>Web 新 兴 技术 (Emerging Technologies〉</li> 
<l> 对 话 : Web 的 未 来 ， 嘉 宾 : Brad Stone ( 彭 博 )、Sir Tim Bemers Lee (W3C) </li> 
<ul> 
<p> 
</article> 
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回 
2.3.8 ”定义 页 脚 栏 


| 
footer 表示 脚注 ， 用 来 标识 文档 或 节 的 页 脚 。footer 元 素 应 当 含 有 其 包含 元 素 的 信息 。 例 如 ， 页 | 攻 频 讲解 
脚 通常 包含 文档 的 作者 、 版 权 信息 、 使 用 条 款 链 接 、 联 系 信息 等 。 | 会 内 
【示例 1】 在 HTML4 中 , 一 般 使 用 <div id="footer"> 包 里 页 脚 信息 , 现在 使 用 footer 元 素来 蔡 代 ， | 
更 富有 语义 。 下 面 示 例 使 用 footer 元 素 为 页 面 添 加 版 权 信 息 栏目 。 








【示例 2】 在 一 个 页 面 中 ， 可 以 使 用 多 个 footer 元 素 。 同 时 ， 可 以 为 article 或 section 内 容 添加 | 
footer。 下 面 示例 分 别 在 article、section 和 body 区 域内 添加 footer 信息 。 | 
1 

| 


<header> 
<h1> 网 页 标题 </hl> 
</header> 
<article> 
<h2> 文 章 标题 </h2> 
<p> 文 章 内 容 正文 </p> 
<footer> 注 释 </footer> 
</article> 
<section> 
<h2> 段 落 标题 </h2> | 
<p> 正 文 <p> | 
<footer> 段 落 标记 </footer> | 
</section> 
<footer> 网 页 版 权 信 息 </footer> 


24 案例 实战 





本 节 将 借助 HTMLS5 新 元 素 设 计 一 个 博客 首页 。 | 

【操作 步骤 】 | 

第 1 步 ， 新 建 HIMLS 文档 ， 保 存 为 testl.html。 | 

第 2 步 , 根据 上 面 各 节 介绍 的 知识 ， 开 始 构建 个 人 博客 首页 的 框架 结构 。 在 设计 结构 时 ， 最 大 限 | 

度 地 选用 HTMLS5 新 结构 元 素 ， 所 设计 的 模板 页 面 基本 结构 如 下 所 示 。 | 

<header> 

<h1>[ 网 页 标题 ]</h1> 
<h2>[ 次 级 标题 ]</h2> 
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gm A 


| <h4>[ 标 题 提示 ]</h4> 
| </header> 
| <main> 
六 <nav> 
仿 7 | <h3>[ 导 航 栏 ]</h3> 
| <a href="#" > 链接 1</a> <a hre 仁 "#"> 链 接 2</a> <a hre 仁 "#"> 链 接 3</a> 
0 
<section> 
<h2>[ 文 章 块 ]</h2> 
<article> 
<header> 
<h1>[ 文 章 标题 ]</h1> 


<aside> 
<h3>[ 辅 助 信息 ]</h3> 
</aside> 


<footer> 
<h2>[ 网 页 脚注 ]</h2> 
</footer> 
</main> 
整个 页 面包 括 两 部 分 : 标题 部 分 和 主要 内 容 部 分 。 标 题 部 分 包括 网 站 标题 、 副 标题 和 提示 性 标题 
信息 ; 主要 内 容 部 分 包括 4 部 分 : 导航 、 文 章 块 、 侧 边栏 、 脚 注 。 文 章 块 包括 3 部 分 : 标题 部 分 、 正 
文部 分 和 脚注 部 分 。 
第 3 步 ， 在 模板 页 面 基础 上 ， 开 始 细 化 本 示例 博客 首页 。 下 面 仅 给 出 本 例 首 页 的 静态 页 面 结构 ， 
如 果 用 户 需 要 后 台 动态 生成 内 容 ， 则 可 以 考虑 在 模板 结构 基础 上 另外 设计 。 把 testl.html 另存 为 
| test2.html， 细 化 后 的 静态 首页 效果 如 图 2.5 所 示 。 





| 
| 

| 

| 

| 

| 

| 褪 一 分 浮躁 , 守 一 分 宁静 , 担 一 份 真诚 ， 扒 一 份 善良 ， 做 个 简单 的 程序 员 。。. 
| 志和 EHTMLS、CS53、JavaSeript , 欢 认 各 位 训 上 前 来 这 入 

| Si 

| a EA 全 和 

| 

| 

| 

| 


失控 供 了 十 这 外 力 ， 二 者 二 的 于 ，，， 【可 妆 夫 相 站 党 洒 吉 损 让 了 汪 训 的 站 二 稚 ， 要 来 江 央 文员 和 汉 的 能 ，，。 法 时 成 江 
Cie 


| 

| pea ,er ene Tare, Ta Ke ease aseer 
| i a 

| 
| 


图 2.5 细 化 后 的 首页 效果 





Os 


第 2 寺 新 迁 JITML5 文 村 | 
疱 提示 : 限于 篇 幅 , 本 节 没有 展示 完整 的 页 面 代码 ， 读 者 可 以 通过 本 节 示例 源 代码 了 解 完 整 的 页 面 
结构 。 | 
| 
第 4 步 , 设计 页 面 样式 部 分 代码 。 这 里 主要 使 用 了 CSS3 的 一 些 新 特性 ， 如 圆 角 (borderradins) | y 
全 出 


和 旋转 变换 等 ， 通 过 CSS 设计 的 页 面 显示 效果 如 图 2.6 所 示 。 相 关 CSS3 技术 介绍 请 参阅 下 面 章 节 | 





要 有 和 技 术 人 员 癌 全 ,HTML5 是 什么 “人 会 芋 加 符 ? 5 

Fe, is | 
的 放下 当 供 了 咎 通 第 力 ， 二 和 i 不 允 的 于 ，，， 铺轨 二; | 

3 Vas 是 

wT Smo, RA .mm | 

下 ) 
7. 
TS 


和 人 其 并 不 朝 白 他 本 的 站 下 问题 ,回答 的 人 从 公明 ， 但 又 好 娄 少 了 
二 人 么 ， 千 明 的 闪 妃 ， 有 得 口 ， 志 有 的 鸡 了 入 鞠 辐 符 的 人 自己 证 和 他 
畔 ,什么 尼 HTML、 什 么 是 CSS、 什 么 是 DOM. 什么 是 oveScnpt ,大 邯 分 的 划 
天 民 旦 天 在 用 这 此 ,但 委 少 全 有 人 去 归 才 一 下 好 们 之 间 的 关系 . 


2.6 博客 首页 的 页 面 完成 效果 示例 站 
容 提示 : 考虑 到 本 章 重点 学 习 HTMLS 新 元 素 的 应 用 ， 所 以 本 节 示例 不 再 深入 讲解 CSS 样式 代码 
的 设计 过 程 ， 感 兴趣 的 读者 可 以 参考 本 节 示例 源 代码 中 的 test3 html 文档 。 
第 5 步 ， 对 于 早期 版 本 浏览 器 ， 或 者 不 支持 HTML5 的 浏览 器 中 ， 需 要 添加 一 个 CSS 样式 ,因为 | 
未 知 元 素 默认 为 行内 显示 display:inline)， 对 于 HTMLS 结构 元 素来 说 ， 我 们 需要 让 它们 默认 为 块 状 | 
显示 。 | 


| 
article, section, nav, aside, main, header hgroup, footer { | 
display: block: | 





} | 
第 6 步 ， 一 些 浏览 器 不 允许 样式 化 不 支持 的 元 素 。 这 种 情形 出 现在 IE8 及 以 前 的 浏览 器 中 ， 因 此 
还 需要 使 用 下 面 的 JavaScript 脚本 进行 兼容 。 
<!--[ifltIE 9]> 
<script> 
document.createElement("article"): 
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| 第 7 步 ， 如 果 浏 览 器 禁用 了 脚本 ， 则 不 会 显示 ， 可 能 会 出 问题 。 因 为 这 些 元 素 定义 整个 页 面 的 结 
| 构 。 为 了 预防 这 种 情况 ， 可 以 加 上 <noscrip 亿 标签 进行 提示 。 
仿 F | <h1> 警 告 <hl> 
ve | <p> 因 为 你 的 浏览 器 不 支持 HTML5， 一 些 元 素 是 模拟 使 用 JavaScript。 不 幸 的 是 ， 您 的 浏览 器 已 禁用 脚 
AT 本。 请 启用 它 以 显示 此 页 。</p> 
</noscript> 


2.5 扫 码 阅读 





2.6 在 线 练 习 


使 用 HTML 结构 标签 设计 各 种 网 页 模块 。 








第 3 章 
网 页 文本 和 版 式 


文字 是 网 页 中 最 基本 的 信息 载体 ， 文 字 通过 不 同 的 排版 方式 、 不 同 的 设计 风格 排列 在 网 页 
上 ， 提 供 了 丰富 的 信息 。 文 字 的 控制 与 布局 在 网 页 设计 中 占 了 很 大 比例 ， 因 此 事 握 好 文字 的 使 
用 ， 对 于 网 页 制作 来 说 是 最 基本 的 任务 。HTMLS 新 增 了 很 多 新 的 文本 标签 ,它们 都 有 特殊 的 含 
义 ， 以 便 定 义 不 同 语义 的 文本 。 本 章 分 类 介绍 HTML 文本 标签 的 使 用 ， 帮 助 初学 者 有 效 使 用 文 
本 标签 设计 各 类 信息 


【 学 习 要 点 】 

MW 熟悉 HIML4 定义 的 格式 化 文本 标签 
MH 事 握 HIMLS 新 增 的 文本 标签 

WI 正确 选用 标签 设计 网 页 文本 信息 。 


去 


= See 从 入 门 到 精通 ( 微 课 精 编 版 ) 


3.1 结构 化 文本 


设计 符合 语义 的 结构 会 增强 信息 可 读 性 和 扩展 性 , 同时 也 降低 了 结构 的 维护 成 本 ,为 跨 平台 信息 


3 六 和 和风 访 T 下 基础 . 






视频 讲解 | 





3.1.1 定义 标题 文本 


<hl>、<h2>、<h3>、<h4>、<h5>、<h6> 标 签 可 定义 标题 ， 按 级 别 高 低 从 大 到 小 分 别 为 hl 、h2、 


| h3、h4、h5、h6， 它 们 包含 的 信息 依据 重要 性 逐渐 递减 。 其 中 hl 表示 最 重要 的 信息 ， 而 h6 表示 最 次 


| 要 的 信息 。 


【示例 1】 在 网 页 中 ， 标 题 信息 比 正 文 信息 重要 ， 因 为 不 仅 浏览 者 要 看 标题 ， 搜 索引 擎 也 同样 要 


， 先 检索 标题 。 下 面 的 做 法 是 不 妥 的 ， 用 户 应 使 用 CSS 样式 来 设计 显示 效果 。 


<div id="header1"> 一 级 标题 </div> 
<div id="header2"> 二 级 标题 </div> 
<div id="header3"> 三 级 标题 </div> 
【示例 2】 很 多 用 户 在 选用 标题 元 素 时 不 规范 ， 不 讲究 网 页 结构 的 层次 轻重 ， 如 图 3.1 所 示 。 
<div id="wrapper"> 
<h1> 模 块 标题 </h1> 
<div id="box1"> 
<h1> 子 栏目 标题 </h1> 
<p> 正 文 </p> 
</div> 
<div id="box2"> 
<h1> 子 栏目 标题 </h1> 
<p> 正 文 </p> 
</div> 
</div> 


子 栏 目标 题 





图 3.1 标题 与 正文 的 信息 重要 性 比较 


在 一 个 节 段 中 ，hl 元 素 被 重复 使 用 了 3 次 ， 显 然 是 不 合适 的 。 
【示例 3】 下 面 示例 中 层次 清晰 、 语 义 合理 的 结构 对 于 阅读 者 和 机 器 来 说 都 是 很 友好 的 。 除 了 hl 


| 
| 素 外 ，h2、h3 和 h4 等 标题 元 素 在 一 篇 文档 中 可 以 重复 使 用 多 次 。 但 是 如 果 把 h2 作为 网 页 副标题 


后 ， 应 该 只 能 够 使 用 一 次 ， 因 为 网 页 的 副标题 只 有 一 个 。 
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<div id=" 
<hl> 网 页 标题 <hl> 
<h2> 网 页 副标题 </h2> 
<div id="box1"> 
<h3> 栏 目标 题 </h3> 
<p> 正 文 <p> 
</div> 
<div id="box2"> | 
<h3> 栏 目标 题 </h3> | 
<div id="sub_box1"> | 
<h4> 子 栏目 标题 <h4> 





<div id="sub_box2"> 


</div> 


hl、h2 和 h3 元 素 比较 常用 ，h4、h5 和 h6 元 素 不 是 很 常用 ， 除 非 在 结构 层级 比较 深 的 文档 中 才 | 
会 考虑 选用 ， 因 为 一 般 文 档 的 标题 层次 在 三 级 左右 。 | 
对 于 标题 元 素 的 位 置 ， 应 该 出 现在 正文 内 容 的 项 部， 一 般 置 于 第 一 行 的 位 置 。 


| 
| 
| 
| 
| 回 
3.1.2 ”定义 段落 文本 a 
| 
<p> 标 签 定义 段 落 文本 ， 在 段落 文本 前 后 会 创建 一 定 距离 的 空白 ， 浏 览 器 会 自动 添加 这 些 空间 ， | 
| 
| 
| 
| 
| 





用 户 可 以 根据 需要 使 用 CSS 重 置 这 些 样式 。 


< 注意 : 传统 用 户 习惯 使 用 <div> 或 <br> 标 签 来 分 段 文本 ， 这 样 会 带 来 歧义 ， 妨 碍 搜索 引擎 对 信息 
的 检索 。 
【示例 】 下 面 代码 使 用 语义 化 的 元 素 构建 文章 的 结构 。 其 中 使 用 div 元 素 定义 文章 包含 框 ， 使 用 


hl 定义 文章 标题 ， 使 用 h2 定义 文章 的 作者 ， 使 用 p 定义 段落 文本 ， 使 用 cite 定义 转载 地 址 。 所 显示 
的 结构 效果 如 图 3.2 所 示 。 


外 地 工作 准备 全 本 加 案 计 年 。 执 贡 。 告 泊 代 和 人才 伯 避 。 信 在 让 计生 人 涪 ，- 耻 这 去 拉 了 个 大 甘于 。 如 方便 的 。- 全 时 是 不 好 调 吉 伐 。 笋 雪 半 要 二 


4 本 仇 .其 中 四 大 区 ， 不 在 于 训 注 ， 趟 在 于 护 。 而 在 于 站 于。 


人 人 
月 、 近 人 全 人 、 则 兴 旋 全 、 守 全 和 本 坟 拉 他 全 公办 、 系 乐于 亲 症 、 基 纪 和 时 理 、 这 二 现在 示 来 


和 
[总计 计 和 已 半 和 全 部 证 注入 了 中 让 香 ， 


地 拉 的 生 祝 了 人 换 种 玫 的 ， 
和 色 有 于 能 一 生 部 在 拖 记 ， 荐 | 





| 
| 
图 32 文档 结构 图 效果 人 
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<div id="article"> 
<hl tide-" 暂 学 散文 箱子 的 哲学 <[h1> 
< tile-" 作 者 "> 海 之 贝 <h2> 
A <p> 一 个 朋友 在 外 地 工作 ， 准 备 今年 要 回 家 过 年 。 我 说 告诉 我 航班 我 去 接 你 吧 。 他 在 电话 那 头 说 ;“ 我 
名 。 这 次 回去 拉 了 个 大 箱子 ， 很 不 方便 的 。” 意 思 是 不 好 麻烦 我 。 我 当然 执意 要 去 接 他 ， 多 几 个 箱子 又 算 什么 。<p> 
<p> 挂 断 电话 ， 想 起 这 个 朋友 整 天 东 奔 本 走 ， 在 异乡 扎根 ， 这 次 又 暂时 要 栖息 到 故乡 ， 有 些许 感慨 。 其 
中 的 原因 ， 不 在 于 漂泊 ， 不 在 于 根 ， 而 在 于 箱子 。<jp> 
| <p> 人 一 生 走 来 ， 谁 不 都 是 拖 着 一 个 大 箱子 呢 ? <Jp> 
<p> 细 数 一 下 ， 我 们 拖 着 的 箱子 ， 装 着 我 们 生存 生活 的 必需 品 ， 也 装着 我 们 路 上 失 来 的 、 换 来 的 、 被 授 
子 的 、 硬 塞 给 的 ， 乃 至 不 知道 怎么 来 的 各 种 各 样 的 东西 。 于 是 我 们 抢 着 风花雪月 、 爱 恨 情 仇 、 柴 米 油 盐 、 康 健 吕 
疾 ， 还 有 生存 的 权利 、 生 活 的 质量 、 生 命 的 尊严 ， 谁 也 摆脱 不 了 。 那 些 所 谓 的 亲情 爱情 友 情 、 欢 乐平 静 痛苦 、 无 
铺 失 包 项 户 、 过 去 现在 未 来， 以 及 来 下 关 末 半 有 全 部 在 这 箱 了 中 存放 着 。</p> 
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<cite title=" 转 载 地 址 ">http://article.hongxiu.com/a/2007-1-26/1674332.shtml </cite> 
</div> 


| 3.1.3 定义 引用 文本 


<q> 标 签 定义 短 的 引用 ， 浏 览 器 经 常 在 引用 的 内 容 周围 添加 引号 ;，<blockquote> 标 签 定义 块 引用 ， 
其 包含 的 所 有 文本 都 会 从 常规 文本 中 分 离 出 来 ， 左 、 右 两 侧 会 缩 进 显示 ， 有 时 会 显示 为 斜体 。 

从 语义 角度 分 析 ，<q> 标 签 与 <blockquote> 标 签 是 一 样 的 。 不 同 之 处 在 于 它们 的 显示 和 应 用 。<q> 
标签 用 于 简短 的 行内 引用 。 如 果 需 要 从 周围 内 容 分 离 出 来 比较 长 的 部 分 ， 应 使 用 <blockquote> 标 签 。 


容 提示 : 一 段 文本 不 可 以 直接 放 在 blockquote 元 素 中 ， 应 包含 在 一 个 块 元 素 中 ， 如 了 元 素 .。 
<q> 标 签 包含 一 个 cite 属性 ， 该 属性 定义 引用 的 出 处 或 来 源 。<blockquote> 标 签 也 包含 一 
个 cite 属性 ， 定 义 引用 的 来 源 URL. 

<cite> 标 签 定义 参考 文献 的 引用 ， 如 书籍 或 杂志 的 标题 ， 引 用 的 文本 将 以 余 休 显示， 常 与 

| <a> 标 签 配合 使 用 ， 定 义 一 个 超 链接 指向 参考 文 的 联机 版 本 . 

| <cite> 标 签 还 有 一 个 隐藏 的 功能 : 从 文档 中 自动 摘录 参考 书目 。 浏 览 器 能 够 根据 它 自动 束 

理 引 用 表格 ， 并 把 它们 作为 脚注 ， 或 者 独立 的 文档 来 显示 。 


【示例 】 下 面 这 个 结构 综合 展示 了 cite、q 和 blockquote 元 素 以 及 cite 引文 属性 的 用 法 ， 演 示 效 
果 如 图 3.3 所 示 。 
<div id="article"> 
<hl> 智 慧 到 底 是 什么 呢 ? <hl> 
<h2>《 卖 拐 》 智 慧 摘 录 </h2> 
<blockquote cite="http://www.szbf.net/Article_Show.asp?ArticleID=1249"> 
<p> 有 人 把 它 说 成 是 知识 ， 以 为 知识 越 多 ， 就 越 有 智慧 。 我 们 今天 无 时 无 处 不 在 受到 信息 的 包围 和 
信息 的 友 炸 ,似乎 所 有 的 信息 都 是 真理 ， 仿 佛 离开 了 这 些 信息 ， 就 不 能 生存 下 去 了 。 但 是 你 掌握 的 信息 越 多 ， 只 
能 说 明 你 知识 的 丰富 ， 并 不 等 于 你 掌握 了 智慧 。 有 的 人 ， 知 识 丰 富 ， 智 慧 不 足 ， 难 有 大 用 ; 有 的 人 ， 知 识 不 多 ， 
， 但 却 无 所 不 能 ， 成 为 奇才 。</p> 
| </blockquote> 
| <p> 下 面 让 我 们 看 看 <cite> 大 忽悠 </cite> 赵 本 山 的 这 段 台词 ， 从 中 可 以 体会 到 语言 的 智慧 。</p> 
| <div id="dialog"> 
| <p> 赵 本 山 : <q> 对 头 ， 就 是 你 的 腿 有 病 ， 一 条 腿 短 ! </q></p> 
| <p> 范 。 伟 ，<q> 没 那个 事 儿 ! 我 要 一 条 腿 长 ， 一 条 腿 短 的 话 ， 那 卖 裤子 人 就 告诉 我 了 ! </q> </p> 
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<p> 赵 本 山 : <q> 卖 裤子 的 告诉 你 你 还 买 裤子 吗 ， 谁 像 我 心眼 这 么 好 哇 ? 这 老 余 ， 我 给 你 调调 。 信 | 
不 信 ， 你 的 腿 随 着 我 的 手 往 高 抬 ， 能 抬 多 高 抬 多 高 ， 往 下 使 劲 落 ， 好 不 好 ? 信 不 信 ? 腿 指 定 有 病 ， 右 腿 短 ! 来 ，| 
起 来 ! </q> </p> 
<p class="action"> 〈 范 伟 配合 做 动作 ) </p> 
<p> 赵 本 山 : <q> 停 ! 麻 没 ? </q> </p> 
<p> 范 伟 : <q> 麻 了 </q> </p> 
<p> 高 秀敏 : <q> 哎 ， 他 咋 麻 了 呢 ? </q> </p> 
<p> 赵 本 山 : <q> 你 踊 ， 你 也 麻 ! </q> </p> 
</div> | 
</div> | 





智慧 到 底 是 什么 呢 ? 
《 实 拐 》 智 夏 摘 录 





图 3.3 引用 信息 的 语义 结构 效果 


3.2 ”描述 性 文本 


在 HIML4 中 ， 有 一 些 侧重 描述 的 文本 标签 ， 用户 习 惯用 它们 来 设置 文字 以 特殊 的 方式 显示 ， 如 | 
粗 体 、 斜 体 和 上 下 标 等 。 在 HTML5 中 ， 淡 化 了 标签 的 修饰 功能 ， 强调 其 固有 语义 性 ， 对 于 极 个 别 过 | | 
时 的 纯 样 式 标签 ， 不 再 建议 使 用 ， 如 <basefont>、<font>、<center>、<s>、<strike>、<u> 等 。 | 


3.2.1 定义 强调 文本 


ae 其 包含 的 文字 默认 显示 为 斜体 :<strong> 标签 也 用 于 强调 文本 ， He 
调 的 程度 更 强 一 些 ， 其 包含 文字 通常 以 粗 体 进行 显示 。 


< 所 注意 : 粗 体 和 儿 体 效果 不 代表 强调 的 语义 ， 用 户 可 以 根据 需要 使 用 CSS 重 置 标签 样式 。 | | 
中 ，<em> 和 <strong> 标 签 使 用 的 次 数 不 应 太 频繁 ， 且 <strong> 应 该 比 <em> 更 少 。 | 
| 





总 提示 :<em> 标签 除 强调 之 外 ， 当 引入 新 的 术语 ， 或 者 在 引用 特定 类 型 的 术语 、 概 念 时 ， 作 为 固 
定 样式 的 时 候 ， 也 可 以 考虑 使 用 <em> 标 签 ， 以 便 把 这 些 名 称 和 其 他 针 体 字 区 别 开 来 。 


【示例 】 对 于 下 面 这 段 信息 ， 分 别 使 用 <strong> 和 <em> 标 签 来 强调 部 分 词语 ， 所 显示 的 效果 如 | 
图 3.4 所 示 。 其 中 em 强调 信息 以 斜体 显示 ， 而 strong 强调 的 信息 以 粗 体 显示 。 L 
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没有 记 委 只 有 更 好 ! 





| 图 3.4 强调 信息 的 语义 结构 效果 
3.2.2 ”定义 格式 文本 


文本 格式 多 种 多 样 ， 如 粗 体 、 斜 体 、 大 号 、 小 号 、 下 划 线 、 预 定义 、 高 亮 、 反 白 等 效果 。 为 了 排 

版 需要 ，HTMLS5 继续 支持 HTML4 中 部 分 纯 格 式 标 签 ， 具 体 说 明 如 下 : 

<b>: 定义 粗 体 文本 。 与 <strong> 标 签 的 默认 效果 相似 。 

容 提示 : 根据 HTML5 规范 ， 在 没有 合适 标签 的 情况 才 选 用 <b> 标 签 。 应 该 使 用 <hl> ~ <h6> 表 示 标 
题 ， 使 用 <em> 标 签 表示 强调 的 文本 ， 使 用 <strong> 标 签 表示 重要 文本 ， 使 用 <mark> 标 答 
表示 标注 、 突 出 显示 的 文本 。 

<i>: 定义 斜体 文本 。 与 <em> 标 签 的 默认 效果 相似 。 
<big>: 定义 大 号 字体 。 

容 提示 : <big> 标 签 包含 的 文字 字体 比 周 围 的 文字 要 大 一 号 ， 如 果 文字 已 经 是 最 大 号 字体 ， 则 <big> 
标签 将 不 起 任何 作用 。 用 户 可 以 谨 套 使 用 <big> 标 签 逐 步 放大 文本 ， 每 一 个 <big> 标签 都 
可 以 使 字体 放大 一 号 ， 直 到 上 限 7 号 文本 。 

回 ”<small>:， 定义 小 号 字体 。 

这 提示 : 与 <big> 标 签 类 似 ，<small> 标 签 也 可 以 说 套 ， 从 而 连续 地 把 文字 缩小 ， 每 个 <small> 标 签 都 

把 文本 的 字体 变 小 一 号 ， 直 到 达到 下 限 的 1 号 字 。 
<sup>: 定义 上 标 文本 。 以 当前 文本 流 中 字符 高 度 的 一 半 显 示 ， 但 是 与 当前 文本 流 中 文字 的 
字体 和 字号 都 是 一 样 的 。 

窟 提示: 当 添加 脚注 ， 以 及 表示 方程 式 中 的 指数 值 时 ，<sup> 很 有 用 。 如 果 和 <a> 标 签 结合 起 来 使 
用 ， 就 可 以 创建 超 链接 脚注 。 

<sub>: 定义 下 标 文本 。 

深 提示 : 无 论 是 <sub> 标 签 ， 还 是 对 应 的 <sup> 标 答 ， 在 数学 等 式 、 科 学 符号 和 化 学 公式 中 都 非 
常 有 用 。 

【示例 】 对 于 下 面 这 个 数学 解 题 演示 的 段落 文本 , 使 用 格式 化 语义 结构 能 够 很 好 地 解决 数学 公式 

中 各 种 特殊 格式 的 要 求 。 对 于 机 器 来 说 ， 也 能 够 很 好 地 理解 它们 的 用 途 ， 效 果 如 图 3.5 所 示 。 

<div id="maths"> 
<hl> 解 一 元 二 次 方程 <hl> 
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<p> 一 元 二 次 方程 求解 有 四 种 方法 :</p> 
<UL> | 
<1i> 直 接 开平 方法 </li> | 

| 








< 公式 法 < 

人 因 式 法 vt 
例如， 针对 下 面 这 个 元 二 次 方程: < 
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p> | 


<p> 我 们 使 用 <big><b> 分 解 因 式 法 </b></big> 来 演示 解 题 思路 如 下 : </p> | 
<p><small> 由 : </small>(<i>x</i>-1)(<i>x</i>-4)=0</p> | 
<p><small> 得 : </small><br /> 
<i>x</i><sub>1</sub>=1<br > 
<i>x</i><sub>2</sub>=4</p> 
</div> 


€ 5 Er ET 
解 一 元 二 次 方程 
一 元 二 次 方程 求解 有 四 种 方法 ， 

* 直接 开平 方法 

“ 配 访 法 


。 公 33 
:9 


例如 ， 守 对 下 面 这 个 一 元 二 次 方程 
Ser4-0 

拷 们 使 用 分 解 因 式 法 来 注 示 解 是 思 苇 如 下 ; 
: CD)e-40 





图 3.5 格式 化 文本 的 语义 结构 效果 
在 上 面 代码 中 ， 使 用 i 元 素 定义 变量 x 以 斜体 显示 ; 使 用 sup 元 素 定义 二 元 一 次 方程 中 二 次 方 ; | 
使 用 b 元 素 加 粗 显 示 常 量 值 ; 使 用 big 元 素 和 元 素 加 大 加 粗 显示 “分 解 因 式 法 "这 个 短语 ; 使 用 small | 
元 素 缩写 操作 谓词 “由 ”和 “得 ”的 字体 大 小 ; 使 用 sub 元 素 定义 方程 的 两 个 解 的 下 标 。 | 


3.2.3 ”定义 输出 文本 


HTML 元 素 提供 了 很 多 输出 信息 的 标签 ， 如 下 所 示 。 J 
<code>: 表示 代码 字体 ， 即 显示 源 代码 。 | 
<pre>: 表示 预定 义 格式 的 源 代码 ， 即 保留 源 代码 显示 中 的 空格 大 小 。 

<tt>: 表示 打印 机 字体 。 | 

<kbd>: 表示 键盘 字体 。 | 

<dfn>: 表示 定义 的 术语 。 | 

<var>: 表示 变量 字体 。 

<samp>: 表示 代码 范例 。 | 

【示例 】 下 面 这 个 示例 中 演示 了 每 种 输出 信息 的 演示 效果 ， 如 图 3.6 所 示 。 虽 然 它 们 的 显示 效果 | 

不 同 ， 但 是 对 于 机 器 来 说 其 语义 是 比较 清晰 的 。 | 





回回 回回 加 四 加 
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<div id="output"> 
<p> 表 示 预 定义 格式 的 源 代码 :</p> 
<pre> 


A | Var count = 0; 
全 | while (count< 10) { 
| document write(count + "&lt:bré&gt:"):; 


<p> 表 示 代码 字体 : <code>Specifies a code sample</code></p> 
| <p> 表 示 打 印 机 字体 : <tt>Renders text in a fixed-width font</tt></p> 
| <p> 表 示 键盘 字体 : <kbd>Renders text in a fixed-width font</kbd></p> 
| <p> 表 示 定义 的 术语 : <dfn>Indicates the defining instance of a term</dfn></p> 
| 


<p> 表 示 变 量 字 体 : <var>Defines a programming variable. Typically renders in an italic font style</var></p> 
<p> 表 示 代 码 范例 : <samp>Specifies a code sample</samp></p> 
<div> 


体 ，Defires a programmmg variable. Typically renders tn anritajic font srvie 


表示 代码 苑 便 ，3pecizies a code sezpie 





图 3.6 输出 信息 的 语义 结构 效果 
3.2.4 ”定义 缩写 文本 


<abbr> 标 签 可 以 定义 简称 或 缩写 ， 通 过 对 缩写 进行 标记 ， 能 够 为 浏览 器 、 拼 写 检查 和 搜索 引擎 提 
| 供 有 用 的 信息 。 例 如 ，dfn 是 Defines a Definition Term 的 简称 ，kbd 是 Keyboard Text 的 简称 ，samp 
| 是 Sample 的 简称 ，var 是 Variable 的 简称 。 

| <acronym> 标 签 可 以 定义 首 字母 缩写 。 例 如 ，CSS 是 Cascading Style Sheets 短语 的 首 字 母 缩写 ， 

| HTML 是 Hypertext Markup Language 短语 的 首 字母 缩写 等 。 


多 注 意 ; HTMILS 不 支持 <acronym> 标 签 ， 建 议 使 用 <abbr> 标 签 代 葵 .在 <abbr> 标 签 中 可 以 使 用 全 局 
属性 tle， 设 置 在 饼 标 指针 移动 到 <abbr> 上 时 显示 完整 版 本 。 
| 【示例 1】 下 面 示例 比较 了 abbr 和 acronym 元 素 在 文档 中 的 应 用 。 


<p><abbrtitle="Abbreviation">abbr</abbr> 元 素 最 初 是 在 HIML3.0 中 引入 的 ， 表 示 它 所 包含 的 文本 是 一 个 更 
长 的 单词 或 短语 的 缩写 形式 。 浏 览 器 可 能 会 根据 这 个 信息 改变 对 这 些 文本 的 显示 方式 ， 或 者 用 其 他 文本 代替 。 
<p> 


<p><acronym title= "Hypertext 
构成 网 页 文档 的 主要 语言 。</p> 





Markup Language">HTML</acronym> 是 目前 网 络 上 应 用 最 为 广泛 的 语言 , 也 是 
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【示例 2】IE6 及 其 以 下 版 本 的 浏览 器 不 支持 abbr 元 素 ， 如 果 要 实现 在 下 低 版 本 浏览 器 中 正确 
显示 ， 不 妨 在 abbr 元 素 外 包含 一 个 span 元 素 。 
<p><span title="Abbreviation"><abbr title="Abbreviation">abbr</abbr></span> 元 素 最 初 是 在 HTML3.0 中 引入 

的 , 表示 它 所 包含 的 文本 是 一 个 更 长 的 单词 或 短语 的 缩写 形式 。 浏览 器 可 能 会 根据 这 个 信息 改变 对 这 些 文本 的 显 ， 
示 方 式 ， 或 者 用 其 他 文本 代替。</p> | 


3.2.5 ”定义 插入 和 删除 文本 


<ins> 标 签 定义 插入 到 文档 中 的 文本 ，<del> 标 签 定义 文档 中 已 被 删除 的 文本 。 一 般 可 以 配合 使 用 
这 两 个 标签 ， 来 描述 文档 中 的 更 新 和 修正 。 

<ins> 和 <del> 标 签 都 支持 下 面 两 个 专用 属性 ， 简 单 说 明 如 下 : 

回 cite， 指 向 另外 一 个 文档 的 URL， 该 文档 可 解释 文本 被 删除 的 原因 。 

datetime: 定义 文本 被 删除 的 日 期 和 时 间 ， 格 式 为 YYYYMMDD。 | 

【示例 】 下 面 演示 示例 的 显示 效果 如 图 3.7 所 示 。 | 

<p> <cite> 因为 懂得 ， 所 以 慈悲 </cite> 。<ins cite="http://news.sanwen8.cn/a/2014-07-13/9518.html" 
datetime="2014-8-1"> 这 是 张爱玲 对 胡 兰 成 说 的 话 </ins>。</p> 

<p> <cite> 笑 ， 全 世界 便 与 你 同 笑 ， 哭 ， 你 便 独 自 哭 </cite>。<del datetime="2014-8-8"> 出 自 冰心 的 《 遥 寄 印 
度 哲 人 泰戈尔 》</del>，<ins cite="http://news.sanweng.cn/a/2014-07-13/9518.html" datetime="2014-8-1"> 出 自 张 爱 
玲 的 小 说 《 花 凋 》</ins> </p> 








SS 人 ocahost 
大 为 入 短 ， 所 以 合 蓝 。 这 是 张爱玲 对 其 兰 成 说 的 话 。 


类 委 站 次 俐 入 从 同 舌 ， 舌 ， 杂 集 尖 各 办 .出身 沙 心 的 《 滩 者 印 疾 匠人 
率 二 尔 >， 出 自 张 之 区 的 小 党 《 花 肖 





图 3.7 插入 和 删除 信息 的 语义 结构 效果 
3.2.6 ”定义 文本 方向 


如 果 在 HTML 页 面 中 混合 了 从 左 到 右 书写 的 字符 (如 大 多 数 语言 所 用 的 拉丁 字符 》 和 从 右 到 左 | 
书写 的 字符 如 阿拉 伯 语 或 希 伯 来 语 字符 )， 就 可 能 要 用 到 bdi 和 bdo 元 素 。 | 
要 使 用 bdo， 必 须 包含 dir 属性 ， 取 值 包括 二 (由 左 至 右 ) 或 世 〈 由 右 至 左 )， 指 定 希 望 星 现 的 显 | 
示 方 向 。 | 

bdo 适用 于 段落 里 的 短语 或 句子 ， 不 能 用 它 包围 多 个 段落 。bdi 元 素 是 HTML5 中 新 加 的 元 素 ， | 
用 于 内 容 的 方向 未 知 的 情况 ， 不 必 包 含 dir 属性 ， 因 为 默认 已 设 为 自动 判断 。 | 

【示例 】 下 面 示例 使 用 <bdo> 标 签 让 唐诗 反 向 显示 。 
<bdo dir-"rtl"> 床 前 明月 光 ， 疑 是 地 上 霜 。 举 头 望 明月 ， 低 头 思 故 乡 。</bdo> 


| 
上 面 示例 演示 效果 如 图 3.8 所 示 。 目 前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 <bdi> 标 签 。 | 
| 





x 


0- Swe ace "着 
。 多 故 思 头 低 ， 月 明 望 头 举 。 需 上 地 是 疑 ， 光 月 明 前 床 





| 
| 
图 3.8 定义 反 向 显示 文本 人 
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3.3 功能 性 文本 


HTML5 为 标识 特定 功能 的 信息 ， 新 增加 多 个 文本 标签 ， 具 体 说 明 如 下 。 
3.3.1 定义 标记 文本 


<mark> 标 签 定义 带 有 记号 的 文本 ， 表 示 页 面 中 需要 突出 显示 或 高 亮 显示 的 信息 ， 对 于 当前 用 户 
具有 参考 作用 的 一 段 文字 。 通常 在 引用 原文 的 时 候 使 用 mark 元 素 , 目的 是 引起 当前 用 户 的 注意 。mark 
| 元 素 是 对 原文 内 容 进行 补充 , 它 应 该 用 在 一 段 原文 作者 不 认为 是 重要 的 , 但 是 现在 为 了 与 原文 作者 不 
| 相关 的 其 他 目的 而 需要 突出 显示 或 高 亮 显示 的 文字 上 面 。 所 以 , 该 元 素 通常 能 够 对 当前 用 户 具 有 很 好 
| 的 帮助 作用 。 

最 能 体现 mark 元 素 作 用 的 应 用 : 在 网 页 中 检索 某 个 关键 词 时 呈现 的 检索 结果 ， 现 在 许多 搜索 引 
擎 都 用 其 他 方法 实现 了 mark 元 素 的 功能 。 
【示例 1】 下 面 示例 使 用 mark 元 素 高 亮 显 示 对 “HTML5 ”关键 词 的 搜索 结果 ， 演 示 效 果 如 图 3.9 
所 示 。 
<article> 
<h2><mark>HTML5</mark> 中 国 :中 国 最 大 的 <mark>HTML5</mark> 中 文 门户 - Powered by Discuz! 官 
网 </h2> 





HTML5</matk> 中 国 , 是 中 国 最 大 的 <mark>HTML5</mark> 中 文 门户 。 为 广大 
<mark>html5</mark> 开 发 者 提供 <mark>html5</mark> 教 程 、<mark>html5</mark> 开 发 工具 、<mark>html5</mark> 
网 站 示例 、<mark>html5</mark> 视 频 、js 教程 等 多 种 <mark>html5</mark> 在 线 学 习 资 源 。</p> 

<p>www.html5cn.org/ - 百度 快照 - 86% 好 评 </p> 


</article> 
mark 元 素 还 可 以 用 于 标识 引用 原文 ， 为 了 某 种 特殊 目的 而 把 原文 作者 没有 重点 强调 的 内 容 标示 
出 来 。 
【示例 2】 下 面 示例 使 用 mark 元 素 将 唐诗 中 的 韵脚 特意 高 亮 显示 出 来 ， 效 果 如 图 3.10 所 示 。 
<article> 
<h2> 静 夜 思 </h2> 
<h3> 李 白 </h3> 


<p> 床 前 明月 <mark> 光 </mark>， 疑 是 地 上 <mark> 箱 </mark>。</p> 
<p> 举 头 望 明 月 ， 低 头 思 故 <mark> 乡 </mark>。</p> 
</article> 
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HTML5 中 国 :中 国 最 大 的 HTML5 中 文 门 户 - 
Powered by Discuz! 官 网 


用 为 广大 htal5 开 发 者 
We 床 前 明月 光 ， 妖 是 地 上 需 。 


举 头 区 明月 ， 伯 头 电 玖 多。 





图 3.9 使 用 mark 元 素 高 亮 显示 关键 字 图 3.10 ”使 用 mark 元 素 高 亮 显示 韵脚 


第 3 章 网 页 文宣 和 有 版式 | 

A 人 注意: 在 HTML4 中 ， 用 户 习 惯 使 用 em 或 strong 元 素来 突出 显示 文字 ， 但 是 mark 元 素 的 作用 | 
与 这 两 个 元 素 的 作用 是 有 区 别 的 ， 不 能 混用 。 | 
mark 元 素 的 标示 目的 与 原文 作者 无 关 ， 或 者 说 它 不 是 被 原文 作者 用 来 标示 文字 的 ， 而 是 | 
后 来 被 引用 时 添加 上 去 的 ， 它 的 目的 是 吸引 当前 用 户 的 注意 力 ， 供 用 户 参 考 ,希望 能 够 对 
用 户 有 帮助 。 而 strong 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 的 ， 如 错误 信息 等 ，em 元 ， 
素 是 作者 为 了 突出 文章 重点 文字 而 使 用 的 。 


窟 提示 : 目前 ， 所 有 最 新 版 本 的 浏览 器 都 支持 该 元 素 。IE8 以 及 更 早 的 版 本 不 支持 mark 元 素 。 


3.3.2 ”定义 进度 信息 


<progress> 标 签 可 以 标识 任务 的 进度 (进程 )。 这 个 进度 可 以 是 不 确定 的 ， 表 示 进 度 正在 进行 ， 
但 不 清楚 还 有 多 少 进度 没有 完成 ， 也 可 以 用 0 到 某 个 最 大 数字 (如 100) 之 间 的 数字 来 表示 进度 完 | 
成 情况 。 
progress 元 素 包含 两 个 新 增 属性 ， 表 示 当 前 任务 完成 情况 ， 简 单 说 明 如 下 : 
回 max: 定义 任务 一 共 需 要 多 少 工作 量 。 工 作 量 的 单位 是 随意 的 ， 不 用 指定 。 
回 value: 定义 已 经 完成 多 任务 。 
在 设置 属性 的 时 候 ，value 和 max 属性 只 能 指定 为 有 效 的 浮 点 
数 ，value 属性 的 值 必须 大 于 0、 小 于 或 等 于 max 属性 值 ，max 属性 
的 值 必须 大 于 0。 
目前 ，Firefox 8+、Operall+、IE 10+、Chrome 6+、Safari 5.2+ 
版 本 的 浏览 器 都 以 不 同 的 表现 形式 对 progress 元 素 提供 了 支持 。 
【示例 】 下 面 示例 简单 演示 了 如 何 使 用 progress 元 素 ， 演 示 效 
果 如 图 3.11 所 示 。 
<section> | 
<p> 百 分 比 进度 : <progress id="progress" max="100"><span>0</span>%</progress></p> | 
<input type="button" onclick="click10"” value=" 显 示 进 度 "/> | 
</section> 
<script> 
function click10{ 
Var progress = document.getElementById(progress): | 
Progress.getElementsByTagName('span')[0].textContent ="0": | 
for(var i=0:i<=100:i++) | 
updateProgress(); | 
} 
function updateProgress(newValue){ 
Var progress = document.getElementById(progress): 
progress.value = newValue: | 
progress.getElementsByTagName('span')[0].textContent = newValue: | 
| 








图 3.11 使 用 progress 元 素 


} 
</script> | 
4 注意 : progress 元 素 不 适合 用 来 表示 度量 衡 ， 例 如 ， 破 盘 空间 使 用 情况 或 查询 结果 .如 需 表 示 度 
量 衡 ， 应 使 用 meter 元 素 。 | 
| 


。45 。 
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3.3.3 ”定义 刻度 信息 
可 频 讲 和 ”<meter> 标 签 定义 已 知 范围 或 分 数值 内 的 标量 、 进 度 。 例 如 磁盘 用 量 、 查 询 结果 的 相关 性 等 。 
”的 注意 ;meter 元 素 不 应 用 于 指示 进度 (在 进度 条 中 ) 。 如 果 标 记 进度 条 ， 应 使 用 progress 元 素 。 


meter 元 素 包含 7 个 属性 ， 简 单 说 明 如 下 : 
value: 在 元 素 中 特别 标示 出 来 的 实际 值 。 该 属性 值 默认 为 0， 可 以 为 该 属性 指定 一 个 浮 点 小 


数值 。 

min: 设置 规定 范围 时 ， 人 允许 使 用 的 最 小 值 ， 默 认为 0， 设 定 的 值 不 能 小 于 0。 

max: 设置 规定 范围 时 ， 人 允许 使 用 的 最 大 值 。 如 果 设 定时 ， 该 属性 值 小 于 min 属性 的 值 ， 那 

么 把 min 属性 的 值 视 为 最 大 值 。max 属性 的 默认 值 为 1。 

low: 设置 范围 的 下 限 值 ， 必 须 小 于 或 等 于 high 属性 的 值 。 同 样 ， 如 果 low 属性 值 小 于 min 
属性 的 值 ， 那 么 把 min 属性 的 值 视 为 low 属性 的 值 。 

high: 设置 范围 的 上 限 值 。 如 果 该 属性 值 小 于 low 属性 的 值 , 那么 把 low 属性 的 值 视 为 high 

属性 的 值 。 同 样 ， 如 果 该 属性 值 大 于 max 属性 的 值 ， 那 么 把 max 属性 的 值 视 为 high 属性 








回回 加 














的 值 。 
optimum: 设置 最 佳 值 ， 该 属性 值 必须 在 min 属性 值 与 max 属性 值 之 间 ， 可 以 大 于 high 属 
性 值 。 


| 
| 
| 回 form: 设置 meter 元 素 所 属 的 一 个 或 多 个 表单 。 

| 【示例 】 下 面 示例 简单 演示 了 如 何 使 用 meter 元 素 ， 效 果 如 图 3.12 所 示 。 
<meter value="3" min="0" max="10'> 十 分 之 三 <jmeter> 

| <meter value="0.6">60%</meter> 

| 

| 
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图 3.12 使 用 meter 元 素 


| 这 提示 : 目前 ，Safari 5.2+、Chrome 6+、Opera 11+、Firefox 16+ 版 本 的 浏览 器 支持 meter 元 素 。 
回 | 





视频 讲解 | <time> 标 签 定义 公历 的 时 间 (24 小 时 制 ) 或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。 该 元 素 能 够 以 机 
| 器 可 读 的 方式 对 日 期 和 时 间 进 行 编码 。 例如 ， 用户 代理 能 够 把 生日 提醒 或 排 定 的 事件 添加 到 用 户 日 程 
| 表 中 ， 搜 索引 擎 也 能 够 生成 更 智能 的 搜索 结果 。 
| 【示例 1】time 元 素 代表 24 小 时 中 的 某 个 时 刻 或 某 个 日 期 ， 表 示 时 刻 时 允许 带 有 时 差 。 它 可 以 
| 定义 很 多 格式 的 日 期 和 时 间 ， 如 下 所 示 : 
| <time datetime="2017-11-13">2017 年 11 月 13 日 <time> 
| <time datetime="2017-11-13">11 月 13 日 <ftime> 
| <time datetime="2017-11-13"> 我 的 生日 <time> 


。46 。 





<time datetime="2017-11-13T20:00"> 我 生日 的 晚上 8 点 </time> 

<time datetime="2017-11-13T20:00Z"> 我 生日 的 晚上 8 点 </time> 

<time datetime="2017-11-13T20:00+09:00"> 我 生日 的 晚上 8 点 的 美国 时 间 </time> 

编码 时 引擎 读 到 的 部 分 在 datetime 属性 里 , 而 元 素 的 开始 标记 与 结束 标记 中 间 的 部 分 是 显示 在 网 
页 上 的 。datetime 属性 中 日 期 与 时 间 之 间 要 用 “T” 文 字 分 隔 ,“T” 表 示 时 间 。 | 


< 全 注意 : 倒数 第 二 行 ， 时 间 加 上 也 文字 表示 给 机 器 编码 时 使 用 UTC 标准 时 间 ， 倒 数 第 一 行 则 加 上 
了 时 差 ， 表 示 向 机 器 编码 另 一 地 区 时 间 。 如 果 是 编码 本 地 时 间 ， 则 不 需要 添加 时 差 。 


<time> 标 签 包含 两 个 属性 ， 简 单 说 明 如 下 : 

回 datetime: 定义 日 期 和 时 间 ， 否 则 由 元 素 的 内 容 给 定 日 期 和 时 间 。 

回 pubdate: 定义 <time> 标 签 中 的 日 期 和 时 间 是 文档 或 <article> 标 签 的 发 布 日 期 。 

pubdate 属性 是 一 个 可 选 的 布尔 值 属性 ， 它 可 以 用 在 article 元 素 中 的 time 元 素 上 , 意思 是 time 元 
素 代表 了 文章 (artilce 元 素 的 内 容 ) 或 整个 网 页 的 发 布 日 期 。 注 意 ， 在 HTML5.1 规范 中 不 再 支持 该 








属性 ， 建 议 不 要 大 范 
【示例 2】 下 面 示例 使 用 pubdate 属性 为 文档 添加 引擎 检索 的 发 布 日 期 。 








转 


<h1> 科 技 公司 都 变 成 了 数据 公司 : 但 你 真 的 了 解 什么 是 “数据 工程 师 ” 吗 ? </h1> 
<p> 发 布 日 期 <time datetime="2016-12-30" pubdate>2016-12-30 09:19</time></p> 


<p> 在 和 国内 外 项 尖 公司 交流 的 过 程 中 ， 我 发 现 他 们 多 数 都 很 骄 做 有 一 支 极其 专业 的 数据 团队 。 这 些 公 ， 
司 花 了 大 量 的 时 间 和 精力 把 数据 工程 这 件 事情 做 到 了 极致 ， 有 不 小 规模 的 工程 师 团 队 ， 开 源 了 大 量 数据 技术 。 | 
Linkedin 有 kafka、samza, Facebook 有 hive、presto, Airbnb 有 airflow、superset, 我 所 熟悉 的 Yelp 也 有 mrjob… 
这 些 公司 在 数据 领域 的 精益 求 精 ， 为 后 来 的 大 步 前 进 黄 定 了 基石 。 
<p> 


<p>https://www.huxiu.com/article/176523.html</p> 


由 于 time 元 素 不 仅仅 表示 发 布 时 间 ， 而 且 还 可 以 表示 其 他 用 途 的 时 间 ， 如 通知 、 约 会 等 。 | 
【示例 3】 为 了 避免 引擎 误解 发 布 日 期 ， 使 用 pubdate 属性 可 以 显 式 告诉 引擎 文章 中 哪个 是 真正 | 


<hl1> 科 技 公司 都 变 成 了 数据 公司 : 但 你 真 的 了 解 什么 是 “数据 工程 师 ” 吗 ? </h1> 
<p> 发 布 日 期 <time datetime="2016-12-30" pubdate>2016-12-30 09:19</time></p> 
<p> 关 于 <time datetime=2017-1-1>1 月 1 日 </time> 更 正 通知 </p> 


<p> 在 和 国内 外 项 尖 公 司 交流 的 过 程 中 ， 我 发 现 他们 多 数 都 很 骄 做 有 一 支 极其 专业 的 数据 团队 。 这 些 公 
司 花 了 大 量 的 时 间 和 精力 把 数据 工程 这 件 事情 做 到 了 极致 ， 有 不 小 规模 的 工程 师 团 队 ， 开 源 了 大 量 数 据 技术 。 
Linkedin 有 kafka、samza, Facebook 有 hive、presto, Airbnb 有 airflow、superset, 我 所 熟悉 的 Yelp 也 有 mrjob 
这 些 公司 在 数据 领域 的 精益 求 精 ， 为 后 来 的 大 步 前 进 莫 定 了 基石 。 
<p> 


<p>https://www.huxiu.com/article/176523.html</p> 
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| 
| 在 这 个 例子 中 有 两 个 time 元 素 , 分 别 定义 了 两 个 日 期 : 更 正 日 期 和 发 布 日 期 。 由 于 都 使 用 了 time 
| 元 素 ， 所 以 需要 使 用 pubdate 属性 表明 哪个 time 元 素 代表 了 新 闻 的 发 布 日 期 。 


会 内 3.3.5 定义 联系 文本 

















<address> 标 签 定义 文档 或 文章 的 作者 、 拥 有 者 的 联系 信息 ， 其 包含 文本 通常 显示 为 斜体 ， 大 部 分 





| 浏览 器 会 在 address 元 素 前 后 添加 折 行 。 
| 如 果 <address> 标 签 位 于 <body> 标 签 内 ， 它 表示 文档 联系 信息 。 
回 ”如 果 <address> 标 签 位 于 <article> 标 签 内 ， 它 表示 文章 的 联系 信息 。 


忘 提示 : <address> 标 答 不 应 描述 通信 地 址 ， 除 非 它 是 联系 信息 的 一 部 分 。 一 般 <address> 被 包含 在 
<footer> 标 签 中 。 


| 【示例 1】address 元 素 的 用 途 不 仅仅 是 用 来 描述 电子 邮箱 或 真实 地 址 , 还 可 以 描述 与 文档 相关 的 
| 联系 人 的 所 有 联系 信息 。 下 面 代码 展示 了 博客 侧 栏 中 的 一 些 技术 参考 网 站 的 网 址 链接 。 
<address> 
<a href="http://www.w3.0reg/">W3C</a> 
<a href="http://www.whatwg.org/">WHATWG</a> 
<a hre 人 "http:/wwwmhtmls.com/">HTMLS 研究 小 组 </a> 
</address> 


| 【示例 2】 也 可 以 把 footer 元 素 、time 元 素 与 address 元 素 结合 起 来 使 用 ， 以 实现 设计 一 个 比较 
| 复杂 的 版 块 结构 。 

Rs 

| <section> 
| <address> 


| <a title=" 作 者 : MDN" hre 人 "https://developermozilla.org/zh-CN/docs/Web/Guide/HTML/HTMLS"> 
| HIML5 - Web 开发 者 指南 </a> 
| </address> 
<p> 发 布 于 : 
<time datetime="2017-6-1">2017 年 6 月 1 日 <time> 


合 


| 在 这 个 示例 中 ， 把 博客 文章 的 作者 、 博 客 的 主页 链接 作为 作者 信息 放 在 了 address 元 素 中 ， 把 文 
| 章 发 表 日 期 放 在 了 time 元 素 中 ， 把 这 个 address 元 素 与 time 元 素 中 的 总 体内 容 作 为 脚注 信息 放 在 了 
| footer 元 素 中。 


3.3.6 ”定义 换行 断 点 


<wbr 标 签 定义 在 文本 中 的 何 处 适合 添加 换行 符 。 如 果 单词 太 长 ， 或 者 担心 浏览 器 会 在 错误 的 位 
置换 行 ， 那 么 可 以 使 用 <wbr> 标 签 来 添加 单词 换行 点 ， 避 免 浏 览 器 随意 换行 。 

目前 ， 除 了 正 浏览 器 外 ， 其 他 主流 浏览 器 都 支持 <wbr> 标 签 。 

【示例 】 下 面 示例 为 URL 字符 串 添加 换行 符 标签 ， 这 样 当 窗 口 宽度 变化 时 ， 浏 览 器 会 自动 根据 
断 点 确定 换行 位 置 ， 效 果 如 图 3.13 所 示 。 
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<p> 本 站 旧地 址 为 : https:<wbr>//<wbr>www.old_site.com/, 新 地 址 为 : https:<wbr>//<wbr>www.new_site.com/。 
<p> 


SS cealo Ce 一 
本 站 | 旧地 址 为 ，https:/ old_site comj， 新 地 址 为 ， Q | © Iocahosutestthtml 


hrtps-wrww new site.com/» 








本 站 | 旧地 址 为: bt /es old_site, com/， 新 地 址 为 ，https 


/i nen_sit' 





正 中 换行 断 点 无 效 Chrome 中 换行 断 点 有 效 
图 3.13 “定义 换行 断 点 


3.3.7 ”定义 文本 注释 


<mby> 标 签 可 以 定义 ruby 注释 , 即 中 文 注音 或 字符 .<ruby> 需 要 与 <r 人 > 标签 或 <rp> 标 签 一 同 使 用 ， | 

其 中 <rP 标 签 和 <mp> 标 签 必须 位 于 <ruby> 标 签 内 。 
回 ”<re> 标 签 定义 字符 《〈 中 文 注音 或 字符 ) 的 解释 或 发 音 。 

回 ”<mp> 标 签 定义 当 浏览 器 不 支持 ruby 元 素 的 显示 内 容 。 | 

目前 ， 正 9+、Firefox、Opera、Chrome 和 Safari 都 支持 这 3 个 标签 。 | 

【示例 】 下 面 示例 演示 如 何 使 用 <ruby> 和 <rt> 标 签 为 唐诗 诗句 注音 ， 效 果 如 图 3.14 所 示 。 

| 

| 

| 

| 





<style type="text/css"> 
ruby { font-size: 40px: } 
</style> 


<ruby> 
少 <rf>shao</re> 小 <rt>xiio</rt> 离 <rP>li</re> 家 <rt>jii</rP> 老 <rP>lio</rt> 大 <rt>da<Art> 回 <rt>huf<irt> 
</muby>， 


<mby> | 
乡 <irt>xiing<At> 音 <rt>yin<ft> 无 <rt>wti<Art> 改 <rt>gii<At> 芝 <rt>bin</rt> 毛 <rt>mao</rt> 衰 <rt>eui<hrt> 
</muby> | 


D eahounmahaml x 
(TT 


shaoxiio i jia lio da huf 


少 小 离 家 者 大 回 ， 
| 


Xiang yin wi gai bin mao cu 


乡音 无 改 要 毛 衰 . 





3.14 给 唐诗 注音 


34 案例 实战 


本 案例 将 尝试 以 手写 代码 的 形式 在 网 页 中 显示 如 下 内 容 。 
回 ”在 网 页 标题 栏 中 显示 “自我 介绍 ”文本 信息 。 
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A 


2 

以 一 级 标题 的 形式 显示 “自我 介绍 ”文本 信息 。 

以 定义 列表 的 形式 介绍 个 人 基本 情况 ， 包 括 姓 名 、 性 别 、 住 址 、 兴 趣 或 爱好 等 。 

在 信息 列表 下 面 以 图 像 的 形式 插入 个 人 的 头像 ， 如 果 图 像 太 大 ， 使 用 width 属性 适当 缩 
小 图 像 。 

以 段落 文本 的 形式 显示 个 人 简历 ， 文 本 内 容 可 酌情 输入 。 

示例 效果 如 图 3.15 所 示 。 





在 中 国 东 北 , 爱 一 个 人 好 
方 个 人 了 不 得 拼 ， 爱 七 个 人 是 





图 3.15 设计 简单 的 自我 介绍 页 面 效果 
示例 完整 代码 如 下 : 
<html> 


<title> 自 我 介绍 </title> 
</head> 


<hl> 自 我 介绍 <hl> 


<dP> 姓 名 </dt> 
<dd> 张 涛 </dd> 
<d 忆 性 别 </d> 
<dd> 女 </dd> 
<dP 住 址 </de> 
<dd> 北 京 亚 运 村 </dd> 
<d 忆 爱好 </di> 
<dd> 网 页 设计 、 听 歌曲 、 上 微 博 </dd> 
</d> 
<img strc="images/head.ipe" width="50%"> 
<p> 大 家 好 ， 我 的 网 名 是 艾 莉 莎 ， 现 在 我 将 简单 介绍 一 下 我 自己 ,我 是 21 岁 .出 生 在 中 国 东北 。 爱 一 个 


| 人 好 难 ， 爱 两 个 人 正常 , 爱 三 个 人 好 玩 ， 爱 四 个 人 好 平凡 , 爱 五 个 人 罢 蛮 , 爱 六 个 人 了 不 得 拦 , 爱 七 个 人 是 天 才 。 
”但 是 我 就 只 爱 我 的 凡 客 &rarr: 艾 莉 莎 ， 冒 犯 。</p> 
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时 候 就 会 出 现 乱码 现象 。 | 

解决 方法 : 

在 Dreamweaver 中 打开 该 文档 ， 选 择 【 修 改 】| 【页面 属性 】 菜 单 命令 ， 在 打开 的 【页 面 属性 】 | 

对 话 框 中 设置 “编码 ”为 “简体 中 文 (GB2312)”， 然 后 单 击 “ 确 定 ” 按 钮 即 可 。 | 

此 时 在 HTML 文档 中 会 添加 如 下 一 行 代码 : | 
<html> 
<head> 

<title> 自 我 介绍 <ltitle> | 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312"> | 

| 


| 
读者 也 可 以 直接 在 HTML 文档 中 手工 输入 代码 定义 网 页 的 字符 编码 。 | 
最 后 ， 重 新 在 浏览 器 中 预览 ， 就 不 会 出 现 上 述 乱码 现象 了 。 | 
【拓展 】 
下 面 为 线 上 拓展 内 容 , 介绍 HTML 文档 转换 为 XHTML 的 基本 方法 。 如果 
你 有 进一步 求知 的 欲望 ， 请 扫 码 拓展 阅读 。 








3.5 扫 码 阅读 


本 节 为 线 上 拓展 内 容 , 介绍 标签 的 语义 化 解析 。HTML 提供 了 丰富 的 标签 元 素 ， 每 个 元 素 都 有 特 





b 
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| 殊 的 含义 。 本 节 将 从 语义 化 角度 讲解 HTML 标签 使 用 以 及 页 面 设计 ， 帮 助 读者 有 效 设计 显示 信息 的 
| 网 页 结构 。 如 果 你 有 进一步 求知 的 欲望 ， 请 扫 码 深度 阅读 。 





3.6 在 线 练 习 


使 用 HTMLS 语义 标签 灵活 定义 网 页 文本 。 
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使 用 网 页 图 像 和 多 媒体 信息 


除了 文本 ， 图 像 、 音 频 和 视频 也 是 网 页 中 不 可 缺少 的 信息 源 ， 巧 妙 地 在 网 页 中 使 用 多 媒体 
信息 可 以 为 网 页 增色 不 少 。HTMLS 在 HIML4 基础 上 新 增 了 两 个 多 媒体 元 素 : audio 和 video， 
其 中 audio 元 素 专门 用 来 播放 网 络 音频 数据 ， 而 video 元 素 专门 用 来 播放 网 络 视频 或 电影 。 


【 学 习 要 点 】 


ml 


于 瑟瑟 于 


插入 图 像 

在 网 页 中 插入 音频 和 视频 

使 用 <audio> 和 <video> 标 签 

了 解 audio 和 video 对 象 的 属性 、 方 法 和 事件 

能 够 使 用 audio 和 video 设计 视频 和 音频 播放 界面 


a 人 Yst6ssstywasmit wy 到 精通 ( 拔 课 本 铺 厂 ) 


4.1 使 用 图 像 


有 | 

网 页 美化 最 简单 、 最 直接 的 方法 就 是 在 网 页 上 添加 图 像 ， 图 像 不 但 使 网 页 更 加 美观 、 形象 和 生动， 
而 且 使 网 页 中 的 内 容 更 加 让 富 多 彩 。 利 用 图 像 创建 精美 网 页 ， 能 够 给 网 页 增加 生机 ， 从 而 吸引 更 多 的 
,| 浏览 者。 


4.1.1 插入 图 像 


在 HIML5 中 ， 使 用 <img> 标 签 可 以 把 图 像 插入 到 网 页 中 ， 有 具体 用 法 如 下 : 

<img src="URL"” alt=" 蔡 代 文 本 " /> 

| img 元 素 向 网 页 中 嵌入 一 幅 图 像 ， 从 技术 上 分 析 ，<img> 标 签 并 不 会 在 网 页 中 插入 图 像 ， 而 是 从 
| 网 页 上 链接 图 像 ，<img> 标 签 创 建 的 是 被 引用 图 像 的 占 位 空间 。 

| 窟 提示 : <img> 标 签 有 两 个 必需 的 属性 : sre 属性 和 alt 属性。 具体 说 明 如 下 : 

| (1) alt: 设置 图 像 的 替代 文本 。 

(2) src: 定义 显示 图 像 的 URL。 





| 
| 
| 
| 【示例 】 在 下 面 示例 中 ， 在 页 面 中 插入 一 幅 照片 ， 在 浏览 器 中 预览 效果 如 图 4.1 所 示 。 
| <img src="images/1.jpg" width="400"” alt=" 读 书 女生 " 放 
| HTMLS 为 <img> 标 签 定义 了 多 个 可 选 属性 ， 简 单 说 明 
| 如 下 。 
| 回 height: 定义 图 像 的 高 度 。 取 值 单位 可 以 是 像素 或 者 
| 百分比 。 
| 加 ”width: 定义 图 像 的 宽度 。 取 值 单 位 可 以 是 像素 或 者 百 
分 比 。 

ismap: 将 图 像 定义 为 服务 器 端 图 像 映射 。 
| 回 usemap: 将 图 像 定义 为 客户 端 图 像 映射 。 
| 回 longdesc: 指向 包含 长 的 图 像 描 述 文档 的 URL。 
| 其 中 ， 不 再 推荐 使 用 HIML4 中 的 部 分 属性 ， 如 align (水 图 4.1 在 网 页 中 插入 图 像 
| 平 对 齐 方式 )、border (边框 粗细 )、hspace (左右 空白 )、vspace 
| 《上 下 空白 )， 对 于 这 些 属性 ，HTML5 建议 使 用 CSS 属性 代替 使 用 。 


“4.1.2 案例， 图 文 混 排 


在 网 页 中 经 常会 看 到 图 文 混 排 的 版 式 , 不 管 是 单 图 或 者 是 多 图 ,也 不 管 是 简单 的 文字 介绍 或 者 是 
大 段 正文 ， 图 文 版 式 的 处 理 方 式 也 很 简单 。 在 本 节 示 例 中 所 展示 的 图 文 混 排 效果 ， 主 要 是 文字 围绕 在 
图 片 的 旁边 进行 显示 。 

【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 以 下 代码 。 
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<div class="pic news"> 
<hl> 雨 埠 </hl> 
<h2> 戴 望 舒 <Jh2> 
<p><img src="images/1.jpg" alt="" /></p> 
<p> 撑 着 油纸 件 ， 独 自 
簿 得 在 悠长 、 悠 长 
又 寂寥 的 雨 营 ， 
我 希望 办 着 
一 个 丁香 一 样 的 
结 着 愁 经 的 姑娘 。 </p> | 
<p> 她 是 有 | 
丁香 一 样 的 颜色 ， 
丁香 一 样 的 芬芳 ， 
丁香 一 样 的 忧愁， 





| 
| 

| 

<!-- 省 略 部 分 结构 雷同 的 文本 ， 请 参考 示例 源 代码 --> | 

</div> | 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 硬 | 
样式 ， 设 置 图 片 的 属性 ， 将 其 控制 到 内 容 区 域 的 左上 角 。 | 
| 

| 

| 

| 

1 














.pic_news { width: 800px; /* 控制 内 容 区 域 的 宽度 ， 根 据 实际 情况 考虑 ， 也 可 以 不 需要 */ } 
.pic_news h2 {/* 定义 标题 样式 */ 

font-family: "隶书 "; font-size: 24px; /* 字体 样式 : 隶书 、 大 小 为 24 像素 */ 

text-align: right: 证 标题 2 居 右 显示 */ 
} 
.pic_news img {/* 定义 图 片 样式 */ 

float: left; /* 使 图 片 旁边 的 文字 产生 浮动 效果 */ 

margin-right: 5px; /* 增加 图 片 与 文字 的 间距 */ 

height: 250px: /* 控制 图 片 大 小 */ | 
} | 
第 3 步 ， 在 浏览 器 中 预览 ， 效 果 如 图 4.2 所 示 。 简 单 几 行 CSS | 

效果 ， 其 中 重点 内 容 就 是 将 图 片 设置 浮动 ，float:left 就 是 将 图 片 向 左 浮动 。 


和 全， 全 我- 样 ， 从 我 一样 地 多 了 名 吕 符 生 翰 、 计 


| 
| 
部 地， 便 蔡 一般 地 半 病 | 
| 


元 7 了。 到 了 条 的 需 





4.2 ”图 文 混 排 的 页 面 效果 未 名 全 要 
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| 4.2 使 用 多 媒体 插件 








插件 是 浏览 器 专用 功能 扩展 模块 , 它 增强 了 浏览 器 的 对 外 接口 能 力 , 实现 对 多 种 媒体 对 象 的 播放 














使 用 <embed> 标 签 
由 <embed> 标 签 可 以 定义 嵌入 插件 ， 以 便 播放 多 媒体 信息 。 用 法 如 下 : 
视频 讲解 <embed src="helloworld.swf" /> 


src 属性 必须 设置 ， 用 来 指定 媒体 源 。<embed> 标 签 包含 的 属性 说 明 如 表 4.1 所 示 。 

| 表 4.1 <embed> 标 签 属性 

| ip 

| 

| | um | 

| we | 定义 嵌入 内 容 的 类 型 
设置 嵌入 内 容 的 宽度 


| 【示例 1】 设 计 背 景 音 乐 。 打 开本 小 节 备 用 练习 文档 testl.html， 另 存 为 test2.html。 在 <body> 标 
| 签 内 输入 下 面 代码 : 
| <embed src="images/bg.mp3" width="307" height="32" hidden="true" autostart="true" loop="infinite"></embed> 





| 指定 背景 音乐 为 "images/bg.mp3"， 通 过 hidden="true" 属 性 隐藏 插件 显示 ， 使 用 autostart="true" 设 
| 置 背景 音乐 自动 播放 ， 使 用 loop="infinite" 设 置 背景 音乐 循环 播放 。 设 置 完毕 属性 ， 在 浏览 器 中 浏览 ， 
| 这 时 就 可 以 边 浏览 网 页 ， 边 听 着 背景 音乐 播放 的 小 夜曲 。 

下 

| 窟 提示 : 要 正确 使 用 ， 需 要 浏览 器 支持 对 应 的 插件 。 

| 【示例 2】 也 可 以 播放 视频 。 新 建 test3.html， 在 <body> 标 签 内 输入 下 面 代码 : 

<embed src="images/vid2.avi" width="413" height="292"></embed> 

使 用 width 和 height 属性 设置 视频 播放 窗口 的 大 小 ， 在 浏览 器 中 浏览 效果 如 图 4.3 所 示 。 





图 4.3 插入 视频 
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cy | 














| 回 
4.2.2 ”使 用 <object> 标 签 
| : 
使 用 <object> 标 签 可 以 定义 一 个 嵌入 对 象 ， 主 要 用 于 在 网 页 中 插入 多 媒体 信息 ， 如 图 像 、 音 频 、 | i 
视频 、Java applets、ActiveX、PDF 和 Flash。 | 会 内 
<object> 标 签 包含 大 量 属性 ， 说 明 如 表 4.2 所 示 。 > 汪 
表 4.2 <embed> 标 签 属性 | Note 
属 性 值 描述 | 
让 六 i 定义 引用 对 象 数据 的 URL。 如 果 有 需要 对 象 处 理 的 数据 文件 , 要 用 data 属性 来 | 
指定 这 些 数据 文件 | 
form form id 规定 对 象 所 属 的 一 个 或 多 个 表单 | 
height | pixels 定义 对 象 的 高 度 | 
name unique_name | 为 对 象 定义 唯一 的 名 称 〔 以 便 在 脚本 中 使 用 ) | 
ype MIME type ”| 定义 被 规定 在 data 属性 中 指定 的 文件 中 出 现 的 数据 的 MIME 类 型 | 
usemap | URL 规定 与 对 象 一 同 使 用 的 客户 端 图 像 映射 的 URL | 
width pixels 定义 对 象 的 宽度 





【示例 1】 下 面 代码 使 用 <object> 标 签 在 页 面 中 嵌入 一 幅 图 片 ， 效 果 如 图 4.4 所 示 。 
<object width="100%" type="image/ipeg" data="images/1 jpe"></object> 

【示例 2】 下 面 代码 使 用 <object> 标 签 在 页 面 中 嵌入 网 页 ， 效 果 如 图 4.5 所 示 。 
<object type="text/html" height="100%" width="10096" data="https://www.baidu.com/"></object> 


a i i 


Bai 站 EE 度 





44 嵌入 图 片 4.5 嵌入 网 页 
【示例 3】 下 面 代码 使 用 <object> 标 签 在 页 面 中 嵌入 音频 ， 效 果 如 图 4.6 所 示 。 
<object width="100%" classid="clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95"> 
<param name="AutoStart" value="1" /> 
<param name="FileName" value="images/bg.mp3" /> 
</object> | 
举 提示 : <param> 标 答 必 须 包 合 在 <object> 标 签 内 ， 用 未 定义 识 入 对 象 的 配置 参数 ， 通 过 名 / 值 对 属 
性 来 设置 ，name 属性 设置 配置 项 目 ，value 属性 设置 项 目 值 。 | 


【示例 4】 下 面 代 码 演示 了 如 何 使 用 <objecf> 标 签 在 页 面 中 嵌入 一 个 Flash 网 站 , 效果 如 图 4.7 | 


所 示 。 
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图 4.6 嵌入 音频 图 4.7 嵌入 Flash 网 站 


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="750" id="FlashID" 
| accesskey="h" tabindex="1" title=" 网 站 首页 "> 
| <param name="movie" value="flash/index.swf"> 
<param name="quality" value="high"> 
<param name="wmode" value="opaque"> 
<!-- 此 param 标签 提示 使 用 Flash Player 6.0 r65 和 更 高 版 本 的 用 户 下 载 最 新 版 本 的 Flash Player。 如 
果 您 不 想 让 用 户 看 到 该 提示 ， 请 将 其 删除 。 --> 
<param name="swfversion" value="9.0.115.0"> 
<!-- 下 一 个 对 象 标签 用 于 非 正 浏览 器 。 所 以 使 用 IECC 将 其 从 正 隐藏 。 --> 
<!--[if !IEP--> 
‘<object type="application/x-shockwave-flash" data="flash/index.swf" width="980" height="750"> 
| <!--<![endif]--> 
| <param name="quality" value="high"> 
| <param name="wmode" value="opaque"> 
<param name="swfversion" value="9.0.115.0"> 
<param name="expressinstall" value="Scripts/expressInstall.swf"'> 
<!-- 浏览 器 将 以 下 替代 内 容 显 示 给 使 用 Flash Player 6.0 和 更 低 版 本 的 用 户 。 --> 
| <div> 
| <h4> 此 页 面 上 的 内 容 需 要 较 新 版 本 的 Adobe Flash Player。</h4> 
| <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/ 
| shared/download buttons/get_flash playergif' alt=" 获 取 Adobe Flash Player" width="112" height="33" /></a></p> 
lL </div> 
<!I--[if E>--> 
| </object> 
| <!--<![endif]--> 
| </object> 


| object 功能 很 强大 ， 初 囊 是 取代 img 和 applet 元 素 。 不 过 由 于 漏洞 以 及 缺乏 浏览 器 支持 ， 并 未 完 

| 全 实现 ， 同 时 主流 浏览 器 都 使 用 不 同 的 代码 来 加 载 相同 的 对 象 。 如 果 浏览 器 不 能 够 显示 object 元 素 ， 
就 会 执行 位 于 <object> 和 </objec 人 > 之 间 的 代码 , 通过 这 种 方式 , 我 们 针对 不 同 的 浏览 器 嵌 套 多 个 object 
元 素 ， 或 者 嵌 套 embed、imeg 等 元 素 。 
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4.3 使 用 HIMLS 音频 和 视频 


现代 浏览 器 都 支持 HTMLS5 的 audio 元 素 和 video 元 素 ， 如 IE 9.0+、Firefox 3.5+、Opera 10.5+、 
Chrome 3.0+、Safari 3.2+ 等 。 


4.3.1 使 用 <audio> 标 签 
<audio> 标 签 可 以 播放 声音 文件 或 音频 流 ， 支 持 Ogg Vorbis、MP3、WAV 等 音频 格式 ， 其 用 
法 如 下 。 | 
| 
<audio src="samplesong.mp3" controls="controls"></audio> | 视频 讲解 


其 中 sre 属性 用 于 指定 要 播放 的 声音 文件 ，controls 属性 用 于 设置 是 否 显示 工具 条 。<audio> 标 签 | 
可 用 的 属性 如 表 4.3 所 示 。 








表 4.3 <audio> 标 签 支持 属性 









什 


controls 






如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 

如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 

p 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 重新 开始 播放 
如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 ， 使 用 


| loop | 
autoplay， 则 忽略 该 属性 


| wn | 要 播放 的 音频 的 URL 


容 提示 : 如 果 浏览 器 不 支持 <audio> 标 签 ， 可 以 在 <audio> 与 </audio> 标 识 符 之 间 谈 入 蔡 换 的 HIML | 
字符 串 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 。 例 如 : | 















<audio src=" test.mp3" controls="controls"> | 
您 的 浏览 器 不 支持 audio 标签 。 | 
</audio> | 
蔡 换 内 容 可 以 是 简单 的 提示 信息 ， 也 可 以 是 一 些 备 用 音频 插件 ， 或 者 是 音频 文件 的 链接 等 
【示例 1】<audio> 标 签 可 以 包 诸多 个 <source> 标 签 ， 用 来 导入 不 同 的 音频 文件 ， 浏 览 器 会 自 动 和 | 
择 第 一 个 可 以 识别 的 格式 进行 播放 。 
<audio ct ="Controls"> 
<source src="medias/test.oge" type="audio/ogg"> 
<source src="medias/test.mp3" type="audio/mpeg"> 


您 的 浏览 器 不 支持 audio 标签 。 | 
</audio> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 ES 和 | 
如 图 4.8 所 示 ， 可 以 看 到 出 现 一 个 比较 简单 的 亲人 | 


音频 播放 器 ， 包 含 了 播放 、 和 暂停、 位置、 时 间 
显示 、 音 量 控制 等 常用 控件 按钮 。 


2 0—— dd 一 





| 
| 
| 
图 4.8 播放 音频 I 
»*59. 和 


| 
<source> 标 签 可 以 为 <video> 和 <audio> 标 签 定义 多 媒体 资源 , 它 必 须 包 庄 在 <video> 或 <audio> 标 识 
| 符 内 。<source> 标 签 包含 3 个 可 用 属性 : 
全 A 加 ”media: 定义 媒体 资源 的 类 型 。 
src: 定义 媒体 文件 的 URL。 
ET type: 定义 媒体 资源 的 MIME 类 型 。 如 果 媒 体 类 型 与 源 文件 不 匹配 , 浏览 器 可 能 会 拒绝 播放 。 
可 以 省 略 type 属性 ， 让 浏览 器 自动 检测 编码 方式 。 
| 为 了 兼容 不 同 浏览 器 ， 一 般 使 用 多 个 <source> 标 签 包含 多 种 媒体 资源 。 对 于 数据 源 ， 浏 览 器 会 按 
| 照 声明 顺序 进行 选择 ， 如 果 支 持 的 不 止 一 种 ， 那 么 浏览 嚣 会 优先 播放 位 置 靠 前 的 媒体 资源 。 数 据 源 列 
| 表 的 排放 顺序 应 按照 用 户 体验 由 高 到 低 ， 或 者 服务 器 消耗 由 低 到 高 列 出 。 
| 【示例 2】 下 面 示例 演示 了 如 何在 页 面 中 插入 背景 音乐 :在 <audio> 标 签 中 设置 autoplay 和 loop 
| 属性， 详细 代码 如 下 所 示 。 
| <audio autoplay loop> 
| <source src="medias/test.oge" type="audio/ogg"> 
| <source src="medias/test.mp3" type="audio/mpeg"> 
| 您 的 浏览 器 不 支持 audio 标签 。 
| </audio> 


回回 回 ” 





4.3.2 ”使 用 <video> 标 签 


| <video> 标 签 可 以 播放 视频 文件 或 视频 流 ， 支持 Ogg、MPEG 4、WebM 等 视频 格式 ， 其 用 法 如 下 。 
| <video src="samplemovie.mp4" controls="controls"></video> 

| 其 中 ,src 属性 用 于 指定 要 播放 的 视频 文件 , controls 属性 用 于 提供 播放 、 暂 停 和 音量 控件 。<video> 
| 标签 可 用 的 属性 如 表 4.4 所 示 。 

表 4.4 <video> 标 签 支持 属性 

| _ 属 性 什 描述 


| autoplay autoplay 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 
| _controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 


| 
| _height pixels 设置 视频 播放 器 的 高 度 
| 

















loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 
muted muted 设置 视频 的 音频 输出 应 该 被 静音 
poster URL 设置 视频 下 载 时 显示 的 图 像 ， 或 者 在 用 户 单 击 播放 按钮 前 显示 的 图 像 





ea cload | 如 果 出 现 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 , 并 预备 播放 。 如 果 使 用 autoplay， 
上 则 忽略 该 属性 


SIC ul 要 播放 的 视频 的 URL 
width pixels 设置 视频 播放 器 的 宽度 


【补充 】 
| HTML5 的 <video> 标 签 支持 3 种 常用 的 视频 格式 ， 简 单 说 明 如 下 。 
| Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 
| MPEG 4: 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 














。60 。 


第 仆 章 使 用 网 页 图像 和 多 媒体 信息 -一 G5 | 
WebM: 带 有 VP 8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 
浏览 器 支持 情况 : Safari 3+、Firefox 4+、Opera 10+、Chrome 3+、JIE 9+ 等 。 
疾 提示 : 如 果 浏 览 器 不 支持 <video> 标 签 ， 可 以 在 <video> 与 </video> 标 识 符 之 间 谱 入 替换 的 HTML » 
字符 囊 ， 这 样 旧 的 浏览 器 就 可 以 显示 这 些 信息 ， 例 如 : | 
<video src=" test.mp4" controls="controls"> 


您 的 浏览 器 不 支持 video 标签 。 


</video> | 
| 
【示例 1】 下 面 示例 使 用 <video> 标 签 在 页 面 中 嵌入 一 段 视 频 ， | | 
视频 文件 ， 浏 览 器 会 自己 选择 第 一 个 可 以 识别 的 格式 。 
<video controls> 
<source src="medias/trailer.ogg" type="video/ogg"> 
<source src="medias/trailer.mp4" type="video/mp4"> 
您 的 浏览 器 不 支持 video 标签 。 
</video > 
以 上 代码 在 Chrome 浏览 器 中 运行 时 ， 当 鼠标 
经 过 播放 画面 ， 可 以 看 到 出 现 一 个 比较 简单 的 视频 
播放 控制 条 ， 包 含 了 播放 、 和 暂停 、 位 置 、 时 间 显 示 、 
音量 控制 等 常用 控件 ， 如 图 4.9 所 示 。 
当 为 <video> 标 签 设置 controls 属性 ， 可 以 在 页 
面 上 以 默认 方式 进行 播放 控制 ,如果 不 设置 controls 
属性 ， 那 么 在 播放 的 时 候 就 不 会 显示 控制 条 界面 
【示例 2】 通 过 设置 autoplay 属性 ， 不 需要 播 
放 控制 条 ， 音 频 或 视频 文件 就 会 在 加 载 完成 后 自动 
播放 。 








4.9 播放 视频 


<video autoplay> | 
<source src="medias/trailer.ogg" type="video/oge"> | 
<source src="medias/trailer.mp4" type="video/mp4"> | 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
也 可 以 使 用 JavaScript 脚本 控制 媒体 播放 ， 简 单 说 明 如 下 : 
load0: 可 以 加 载 音频 或 者 视频 文件 。 
play0: 可 以 加 载 并 播放 音频 或 视频 文件 ， 除 非 已 经 暂停 ， 否 则 默认 从 开头 播放 。 
pause0: 暂停 处 于 播放 状态 的 音频 或 视频 文件 。 
canPlayType(type): 检测 video 元 素 是 否 支持 给 定 MIME 类 型 的 文件 。 | 
【示例 3】 下 面 示例 演示 如 何 通过 移动 鼠标 来 触发 视频 的 play 和 pause 功能 。 设 计 当 用 户 移动 鼠 | 
标 光 标 到 视频 界面 上 时 ， 播 放 视频 ， 如 果 移 出 鼠标 光标 ， 则 暂停 视频 播放 。 
<video id="movies" onmouseover="this .play0" onmouseout="this.pauseO" autobuffer="true" 
width="400px" height="300px"> 
<source src="medias/trailer.ogv" type='video/ogg: codecs= "theora. vorbis"> 
<source src="medias/trailer.mp4" type='video/mp4> 
</video> 
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上 面 代 码 在 浏览 器 中 预览 ， 显 示 效 果 如 图 4.10 所 示 。 





localho— SC Echo 














图 4.10 使 用 鼠标 控制 视频 播放 


44 案例 实战 


本 节 将 通过 多 个 案例 练习 如 何 使 用 图 像 标签 ， 如 何 灵活 使 用 JavaScript 脚本 控制 HTMLS 多 媒体 
播放 。 


4.4.1 设计 图 文 新 闻 
本 节 示 例 将 设计 





-个 图 文 新 闻 页 面 ， 通 过 添加 图 片 ， 





< 拟 注意 : 本 例 需 要 CSS 知识 ， 如 果 读 者 暂时 不 熟悉 CSS， 建 议 先 跳 过 本 节 ， 等 学 习 完 CSS 之 后 ， 
回头 再 学 习 。 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 index.html， 在 <body> 标 签 内 输入 以 下 代码 。 


<div class="news-box"> 

<!-- 新 闻 标 题 S -> 

<hl> 北 京 将 公务 员 酒 后 驾车 列 入 年 度 考核 <hl> 

<!-- 新 闻 标 题 E --> 

<!-- 新 闻 相关 信息 S -> 
| <div class="info"> <span class="date">2014-05-23 19:05:37</span> <span class="from"> 来 源 :<a hre 仁 "#"> 
”新 华 网 </a></span> <a hre 伍 "#" class="comments_num"> 跟 贴 23 条 </a> <a hre 仁 "#"> 手 机 看 新 闻 </a> </div> 

<!-- 新 闻 相 关 信 息 了 -> 

<!-- 新 闻 摘要 S -> 

<div class="summary"> 
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<h2> 新 闻 摘要 : </h2> 
<p> 核 心 提示 : 北京 日 前 规定 ， 公 务 员 酒 后 驾车 等 交通 安全 违法 行为 将 列 入 年 度 考核 。 纪 委 给 予 交 | 
通 违法 人 相应 处 分 、 诚 勉 谈 话 或 通报 批评 。</p> 


</div> y 
-- 新 闻 摘要 E --> | Y 
<!-- 新 闻 内 容 S -> | 医 网 
<div class="content"> 
3 


<img src="images/new_pic.jpg" alt=" 新 闻 图 片 " class="news_pic"> | 
<p><strong> 新 华 网 5 月 23 日 电 </strong> 北京 市 纪委 、 组 织 部 、 公 安 局 、 监 察 局 日 前 联合 作出 规 | 
定 : i eae 并 列 入 干部 年 度 考核 的 依据 ， 
5 | 
”> 北京 市 纪委 认定 的 严重 道路 交通 安全 霹 法 行为 主要 有 无 驾驶 证 驾驶 机 动车 辆 ， 发 生 道路 交通 
事故 后 逃逸 、 故 意 破坏 现场 或 者 冒名 项 蔡 , 饮酒 后 或 醉酒 驾驶 机 动车 辆 ， | 
处 罚 ， 因 交通 安全 违法 行为 受到 行政 拘留 处 罚 。</p> 
<p> 省 略 部 分 内 容 ， 信 息 来 源 于 网 络 ! <span class="editor">( 本 文 来 源 : href" 新 华 网 o> 作 | 
者 : 张和平 )</span></p> 
</div> 
<!-- 新 闻 内 容 E -> 
<!-- 新 闻 评 论 S -> 
<div class="comments"><a href="#">【 已 有 <em>23</em> 位 网 友 发表 了 看 法 ， 点 击 查看 。】</a></div> 
<!-- 新 闻 评论 E--> 
</div> 


设计 新 闻 内 容 页 面 结构 ， 初 步 效 果 如 图 4.11 所 示 。 


北京 将 公务 员 酒 后 各 车 列 入 年 度 考核 
2014-04-23 19:05:37 来 源 :新 华 网 回 贴 23 条 手 新 闻 


新 闻 摘要 : 


| 

术 心 提示 ， 北京 日 前 要 定 ， 公 务 员 酒 后 加 车 等 交通 安全 志 法 行为 将 列 入 年 内 考 校 ， 纪 委 浴 于 交通 违法 人 相应 处 | 
分 、 广 好 谈 语 成 通报 批评 | 
| 





图 4.11 未 添加 图 片 效 果 的 新 闻 内 容 页 


为 了 能 实现 图 文 并茂 的 新 闻 内 容 页 面 , 我 们 需要 在 页 面 内 容 中 插入 图 片 ,而 需要 修饰 的 背景 图 片 | 
只 需要 通过 CSS 的 background 属性 调用 即 可 。 因 此 需要 修改 HTML 页 面 结构 ， 通 过 <img> 标 签 插 入 
需要 在 页 面 中 出 现 的 图 片 。 | 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 准备 定义 | 
样式 。 [ 
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| 第 3 步 ， 如 果 本 例 继续 使 用 上 一 节 中 提 到 的 样式 设计 方法 ， 会 发 现 该 页 面 中 新 闻 图 片 独占 一 行 ， 
| 而 且 并 不 是 居中 显示 ， 对 于 视觉 效果 来 说 并 不 是 很 理想 ， 如 图 4.12 所 示 。 


侠 北京 将 公务 员 酒 后 


| 014-05-23 19:03:37 来 源 : 


Note 核心 提示 和 文通 安 全 画 法 行为 符 列 信 年度 专 梳 纪委 


日 前 联合 作出 规定 ， 仙 关 、 事业 
单位 工作 人 员 严 重 这 行为 ， 并 列 和 干部 年 可 考核 的 依 
据 之 





图 4.12 初步 CSS 混 排 效果 


| 第 4 步 ， 图 文 新 闻 内 容 页 面 的 页 面 效 果 大 概 的 外 观 已 经 呈现 出 来 了 ， en 
| 希望 在 新 闻 标 题 后 面 添 加 一 个 代表 新 闻 内 容 为 图 文 新 闻 的 图 标 并 且 将 内 容 区 域 中 的 图 片 居中 显 


.news-box hl { 

float:left; /* 不 设置 宽度 的 情况 下 使 用 浮动 ， 使 其 自 适应 宽度 */ 

height:20px: 

padding:5px 20px 5px 0; /#* 添加 右边 的 内 补丁 ， 增 加 空白 的 空间 显示 背景 图 片 */ 

line-height:26px: 

overflow:hidden; /* 行 高 比 高 度 的 属性 值 要 大 ， 设 置 overflow:hidden: 使 超过 的 部 分 隐藏 */ 
font-size:20px: 

background:url(images/ico.gif) no-repeat right 10px: /* 添加 背景 图 ， 并 将 其 控制 在 标题 的 右边 中 间 的 位 





| 天 2 
| }* 设置 新 闻 标题 的 样式 高 度 为 30px， 宽 度 为 默认 值 anto， 并 添加 行 高 以 及 设置 文字 大 小 */ 
] .news-box .info { 

clear:both; /* 清除 标题 的 浮动 ， 避 免 新 闻 信息 的 内 容错 位 */ 

height:20px; 

margin-bottom:15px: 

font-size: 12px:} /* 设置 新 闻 相 关 信息 的 样式， 添加 外 补丁 ， 使 其 与 内 容 信息 产生 间距 */ 
.news-box .content { 

text-align:center; /* 新 闻 内 容 区 域 居中 显示 */} 
.news-box .content p { 

margin-bottom: 10px: 
| line-height:22px: 
| text-indent:2em:; 
| text-align:left; /* 调整 新 闻 内 容 区 域 文字 居 左 显示 */ 

}/#* 新 闻 内 容 区 域 的 每 个 段落 加 大 行 间距 〈 行 高 )， 并 首 行 缩 进 ， 段 落 与 段落 之 间 存在 一 点 间距 */ 
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第 $ 步 ， 修 改 CSS 样式 表 中 的 部 分 代码 ， 最 终 在 浏览 器 中 会 看 到 如 图 4.13 所 示 的 效果 。 


第 6 步 ， 在 上 图 中 ,可 以 看 到 新 闻 图 片 的 宽 高 比较 小 ， 而 继续 使 用 居中 的 方式 显示 图 文 新 闻 内 | 


容 页 ， 将 会 使 图 片 的 周围 显得 很 空间 。 这 时 可 以 考虑 使 用 图 文 环绕 的 版 式 设计 图 文 新 闻 内 容 页 ， 如 | 大 

图 4.14 所 示 。 | | 名 
第 7 步 ,在 图 4.13 中 ,将 图 片 由 原来 的 大 图 变更 为 一 张 小 图 , 因此 在 HIML 页 面 结构 中 修改 <img> | 

村 中 的 文件 名 





<img src="images/new_pic_s.jpg" alt=" 新 闻 图 片 " /> | 


标题 处 代表 图 文 新 闻 的 ICO 图 标 


将 公务 员 漂 后 驾车 列 入 年 度 考核 





入 外 后 委 二 尖 突 其 天 之 外 生 为 和 诈 \ 生 择 过 夫 . 扫 芭 
Pt 、 各 地 订 计 世相 环 、 


新 第 网 5 月 23 日 电 北京 市 所 委 - 丰 织 部 公家 
联 各 作出 规定 相关、 事业 单 人 工作 人 员 严 下 


为 ， 和 当 李 人 所 在 间 位 抄 告 ， 并 列 人 干部 和 雄壮 术 的 依据 之 一 。 
大 和 认证 的 产 萤 滴 汪 交 安 生计 站 行为 主要 条， 无 伟 证 
用 村 动 下 辆 ， 柴 生 汪 距 交通 事 改 后 设 曲 、 故 号 驮 坏 现 场 下 者 加 名 顶 
将， 议 浊 后 下 只 悟 当 吏 机 功 牛 辆 ， 因 序 克 有 好 过 抽奖 通 管 昌 而 突 员 | 生 上 处 工 ， 医 交通 磷 全 过 
法 行 为 受 对 行政 拘 欠 处 加 
省 喷 吕 放 内 寥 ， 信 息 不 渍 于 网 族人 4 文 床 需 ， 玫 红 司 作者 ， 张 和 王 ) 
了 已 泊 区 位 回 去 下 了 看 注 ， 点 于 查 在。 了 


i 六 作出 检定， 机关、 节目 
六 讶 用 放 外 让 公告， 寞 信 干 训 上 上 和 伯 依 





图 4.13 增加 图 片 效果 后 的 图 文 新 闻 内 容 页 图 4.14 文字 围绕 着 图 片 的 图 文 新 闻 内 容 页 


第 8 步 ， 基 于 原 有 的 图 文 新 闻 内 容 页 的 CSS 样式 ， 需 要 将 .news-box .content 部 分 的 CSS 样式 全 | 
部 去 掉 ， 已 经 不 需要 再 设置 新 闻 内 容 区 域 的 居中 显示 ， 并 设置 图 片 浮动 (float) 属性 ， 使 图 片 周围 的 | 
文字 能 围绕 着 图 片 。 





.content Ss pic { 
floatleft: | 
margin-right:10px:} /* 设置 文字 围绕 着 图 片 的 图 文 混 排 效果 */ | 

.news-box .contentp { | 
margin-bottom: 10px: 
line-height:22px: 
text-indent:2em: 





} /* 新 闻 内 容 区 域 的 每 个 段落 加 大 行 间距 〈 行 高 )， 并 首 行 缩 进 ， 段 落 与 段落 之 间 存在 一 点 间距 志 


简单 几 句 CSS 样式 代码 即 可 设计 漂亮 的 页 面 布局 效果 。 不 过 图 文 混 排 的 页 面 效 果 只 4 能 设置 图 片 
居 左 或 者 居 右 显示 ， 无 法 实现 当 图 片 在 文字 内 容 中 间 时 文字 围绕 图 片 左右 显示 的 页 面 效 果 。 
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4.4.2 设计 阴影 白 边 


bp 本 例 设计 为 img 元 素 定义 一 个 默认 的 阴影 样式 , 这 样 当 在 网 页 中 插入 一 个 图 像 时 , 它 会 自动 显示 
| 为 阴影 效果 ， 如 图 4.15 所 示 。 与 设置 前 插入 的 图 像 效 果 比 较 之 后 ， 如 图 4.16 所 示 ， 会 发 现 这 种 定义 
i 有 阴影 效果 的 图 像 更 真实 而 富有 立体 感 ， 特 别 适用 于 网 上 照片 发 布 页 面 。 


LD WV/ 





图 4.16 图 像 未 定义 阴影 样式 效果 


| .人 注意 : 本 例 需 要 CSS 知识 ， 如 果 读者 暂时 不 熟悉 CSS， 建 议 先 跳 过 本 节 ， 等 学 习 完 CSS 之 后 ， 
回头 再 学 习 。 


【操作 步骤 】 
第 1 步 ， 需 要 在 图 像 编 辑 器 中 设计 一 个 4 像素 高 、1 像素 宽 的 渐变 阴影 ， 如 图 4.17 所 示 。 








队 
[ot 
4.17 设计 一 个 渐变 阴影 图 像 

第 2 步 ， 在 网 页 <head> 标 签 中 定义 如 下 样式 。 

<style type="text/css"> 

body { background: #FOEADA: } 


。66 。 


第 企 章 使 用 网 页 图 像 和 多 媒体 信息 有 
所 


img{ 
background: white: 从 白色 背景 */ 
padding: Spx Spx 9px Spx: 让 增加 内 边 距 */ 


background: white url(images/shad_bottom.gif) repeat-x bottom left: /* 底 边 阴影 */ 
border-left: 2px solid #dcd7c8: 让 左 侧 浅 阴影 */ 
border-right: 2px solid #dcd7c8: 。/* 右 侧 浅 阴影 */ 
国 
</style> 
所 注意 : 在 定义 底 边 内 边 距 , 考虑 到 底 边 阴影 背景 图 像 可 能 要 占用 4 个 像素 的 高 度 ， 因 此 要 多 设置 | 
4 像素。 左右 两 侧 的 阴影 颜色 可 以 根据 网 页 背景 色 时 适当 调整 深浅 . | 
第 3 步 ， 在 页 面 <body> 标 签 内 插入 任意 多 个 图 像 即 可 ， 演 示 效 果 如 图 4.17 所 示 。 
<img src="images/1.jpg" width="200"> 
<img src="images/2.jpg" width="300"> 
<img src="images/3.jpg" width="400"> 


4.4.3 设计 音乐 播放 器 


如 果 需 要 在 页 面 上 播放 一 段 音频 ， 同 时 又 不 想 被 默认 的 控制 界面 影响 显示 效果 ， 则 可 创建 一 个 
隐藏 的 audio 元 素 ， 即 不 设置 controls 属性 ， 或 将 其 设置 为 false， 然 后 用 自 定 义 控 制 界面 控制 音频 | 
的 播放 。 

本 例 主要 代码 如 下 : | 

<style type="text/css"> | 

| 
1 








body { background:url(images/bg.jpg) no-repeat:} 
#toggle { position: absolute: left: 93px: top: 396px:} 
</style> 
<audio id="music"> 
<source src="medias/wlh.oge"> | 
<source src="medias/wlh.mp3"> | 
</audio> | 
<button id="toggle" onclick="toggleSound0O"> 播 放 </button> 
<script type="text/javascript"> 
function toggleSoundO { 
Var music = document.getElementById(“music"): | 
Var toggle = document.getElementById("toggle"): | 
if (music.paused) { | 
Inusic.playO: 
togele.innerHTML = "暂停 ": 
jelse { 
music.pause(): | 
toggle.innerHTML =" 播 放 ": | 
} | 
} 
</script> 
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二 错 改 肖 4.18 ”用 脚本 控制 音乐 播放 
| 在 上 面 示例 中 ， 先 隐藏 了 用 户 控制 界面 ， 也 没有 将 其 设置 为 加 载 后 自动 播放 ， 而 是 创建 了 一 个 具 
| 有 切换 功能 的 按钮 ， 以 脚本 的 方式 控制 音频 播放 : 
<button id="toggle" onclick="toggleSound0"> 播 放 </button> 


| 按钮 在 初始 化 时 会 提示 用 户 单 击 它 以 播放 音频 。 每 次 单 击 时 ， 都 会 触发 toggleSound0 函 数 。 在 
| toggleSoundO 函 数 中 ， 首 先 访问 DOM 中 的 audio 元 素 和 button 元 素 。 


function toggleSoundO { 
| Var music = document.getElementById(“music"); 
| Var toggle = document.getElementById("toggle ): 
| if (music.paused) { 
music.playO: 
toggle.innerHTML = "暂停 "; 


} 
} 
通过 访问 audio 元 素 的 paused 属性 , 可 以 检测 到 用 户 是 否 已 经 暂停 播放 。 如 果 音 频 还 没 开始 播放 ， 
| 那么 paused 属性 默认 值 为 tue， 这 种 情况 在 用 户 第 一 次 单 击 按钮 的 时 候 遇 到 。 此 时 ， 需 要 调用 play0 
| 函数 播放 音频 ， 同 时 修改 按钮 上 的 文字 ， 提 示 再 次 单 击 就 会 暂停 。 











| else { 

| music.pause():; 

| toggle.innerHTML =" 播 放 ": 
} 


相反 ， 如 果 音 频 没 有 暂停 ， 则 会 使 用 pause0 函 数 将 它 暂停 ， 然 后 更 新 按钮 上 的 文字 为 “播放 ”， 
让 用 户 知道 下 次 单 击 的 时 候 音频 将 继续 播放 。 
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SG 
4.4.4 设计 视频 播放 器 
本 例 将 设计 一 个 视频 播放 器 ， 用 到 HIML5 提供 的 video 元 素 和 HIMLS 提供 的 多 媒体 API 的 扩 | 
展 ， 示 例 演示 效果 如 图 4.19 所 示 。 | 


le ET 9 Cp | 














视频 播放 器 





图 4.19 设计 视频 播放 器 


使 用 JavaScript 控制 播放 控件 的 行为 ( 自 定义 播放 控件 )， 实 现 如 下 功能 : 

回 利用 HTML+CSS 制作 一 个 自己 的 播放 控件 条 ， 然 后 定位 到 视频 最 下 方 。 
回 ”视频 加 载 loading 效果 。 

回 播放 、 和 暂停 。 

回 总 时 长 和 当前 播放 时 长 显示 。 

回 ”播放 进度 条 。 

回 全屏 显 示 。 

【操作 步骤 】 | 
第 1 步 ， 设 计 播放 控件 。 | 
<figure> | 

<figcaption> 视 频 播放 器 </figcaption> 
<div class="player"> 
<video src="./video/mv.mp4"></video> 
<div class="controls"> 
<!-- 播放 /暂停 --> 
<a href="javascript::" class="switch fa fa-play"></a> 
<!-- 全 屏 -> 
<a href="javascript::" class="expand fa fa-expand"></a> 
<!-- 进度 条 -> 
<div class="progress"> 
<div class="loaded"></div> 
<div class="line"></div> 
<div class="bar"></div> 
</div> 
<!-- 时 间 -> 
<div class="timer"> 
<span class="current">00:00:00</span> 
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<span class="total">00:00:00</span> 
| </div> 
| <- 声音 -> 
| </div> 
| </div> 
| 
上 面 是 全 部 HTML 代码 ，.controls 类 就 是 播放 控件 HTML， 引 用 CSS 外 部 样式 表 : 


| <link rel="stylesheet" href="css/font-awesome.css"> 
<link rel="stylesheet" href="css/player.css"> 
为 了 显示 播放 按钮 等 图 标 ， 本 例 使 用 了 字体 图 标 。 
第 2 步 ， 设计 视频 加 载 loading 效果 。 先 隐藏 视频 ， 用 一 个 背景 图 片 蔡 代 ， 等 视频 加 载 完毕 之 后 ， 
再 显示 并 播放 视频 。 
Player { 
width: 720px: height: 360px; 
margin: 0 auto; position: relative; 
background: #000 url(images/loading.gif) center/300px no-repeat: 


| 
| 国 国 
| video { 
display: none; margin: 0 auto; 
height: 10094: 
} 


| 
| 第 3 步 ， 设 计 播放 功能 。 在 JavaScript 脚本 中 ， 先 获取 要 用 到 的 DOM 元 素 。 
| var video = document querySelector("video"): 
Var isPlay = document.querySelector(".switch"): 
Var expand = document.querySelector(".expand"): 
| Var progress = document.querySelector(".progress"); 
| Var loaded = document.querySelector(".progress > .loaded"): 
| Var currPlayTime = document.querySelector(".timer > .current"): 
var totalTime = document.querySelector(".timer > .total"); 


当 视 频 可 以 播放 时 ， 显 示 视 频 : 


// 当 视频 可 播放 的 时 候 
Video.oncanplay = functionO{ 
// 显 示 视频 
this.style.display = "block": 
// 显 示 视频 总 时 长 
totalTime.innerHTML = getFormatTime(this.duration): 
a 
第 4 步 ， 设 计 播 放 、 暂 停 按钮 。 当 单 击 播放 按钮 时 ， 显 示 暂 停 图 标 ， 在 播放 和 和 暂停 状态 之 间 切 换 
| 图标。 
/播放 按钮 控制 
isPlay.onclick = fnnctionO{ 
iftvideo.paused) { 
Video.playO: 
}else{ 
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Video.pauseO: 
} | 
this.classList.toggle("fa-pause"): | 
本 | 1 
第 5 步 ， 获 取 并 显示 总 时 长 和 当前 播放 时 长 。 前 面 代码 中 其 实 已 经 设置 了 相关 代码 ， 此 时 只 需要 | 
把 获取 到 的 毫秒 数 转换 成 需要 的 时 间 格 式 即 可 。 先 定义 getFormatTime0 函 数 ， 用 于 转换 时 间 格 式 。 


function getFormatTime(time) { | 
Var time = time//0; | 
var h = parseInt(time/3600). 
m= parseInt(time%3600/60). 
s= parseInt(time%60); 
h=h<10?"0"+h:h: 
m=m<10?"0"+m: m; 
s=s<10?"0"+s:s; 
Tetumn ht+":"+m+":"+s; 
} 
第 6 步 ， 设 计 播放 进度 条 。 | 
| 
video.ontimeupdate = fonction0O{ | 
var currTime = this.currentTime, // 当 前 播放 时 间 | 
duration = this.duration: // 视 频 总 时 长 
/百分比 
varpre= currTime / duration * 100 + "%"; | 
// 显 示 进 度 条 | 
loaded.style.width = pre: | 
// 显 示 当 前 播放 进度 时 间 | 
currPlayTime.innerHTML = getFormatTime(currTime); 
上 
这 样 就 可 以 实时 显示 进度 条 了 ， 此 时 ， 还 需要 单 击 进度 条 进行 跳跃 播放 ， 即 单 击 任意 时 间 点 视频 | 
跳 转 到 当前 时 间 点 播放 。 | 
| 
/跳跃 播放 
Progress.onclick = function(e){ 
var event=e window.event: 
Video.currentTime = (event.offsetX / this.offsetWidth) * video.duration: 
上 
第 7 步 ， 设 计 全 屏 显示 。 这 个 功能 可 以 使 用 HIMLS 提供 的 全 局 API: webkitRequestFullScreen 
实现 ， 与 video 元 素 无 关 ， 经 测试 在 Firefox、 正 浏览 器 下 全 屏 功能 不 可 用 ， 仅 针对 webkit 内 核 浏览 | 
器 可 用 。 
1 全屏 
expand.onclick = functionO{ | 
video.webkitRequestFullScreen(: 
纺 
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4.5 HTMLS5 多 媒体 API 


本 节 为 线 上 拓展 内 容 ， 介 绍 HTMLS 多 媒体 API 的 基础 知识 和 应 用 。 


Not 
4.5.1 设置 属性 







audio 和 video 元 素 拥有 相同 的 脚本 属性 ， 下 面 对 这 些 属性 进行 简单 
介绍 。 详 细 说 明 请 扫 码 阅读 。 


audio 和 video 元 素 拥 有 相同 的 脚本 方法 ， 下 面 简单 介绍 这 些 方法 。 
详细 说 明 请 扫 码 阅读 。 


| 4.5.3 设置 事件 
| 回 






回 
audio 和 video 元 素 支 持 HTMLS 的 媒体 事件 ， 使 用 JavaScript 脚本 可 
i 以 捕 提 这 些 事件 并 对 其 进行 处 理 。 处 理 这 些 事件 一 般 有 下 面 两 种 方式 。 详 
9 细 说 明 请 扫 码 阅读 。 
4.5.4 
| 国 k 
本 节 通 过 一 个 综合 示例 整合 HTMLS 多 媒体 API 中 各 种 属性 、 方 法 和 
事件 ,演示 如 何在 一 个 视频 中 实现 对 这 些 信息 进行 访问 和 操控 。 详 细 说 明 
请 扫 码 阅读 。 





4.6 在 线 练 习 
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在 网 页 中 ， 大 部 分 信息 都 需要 列表 结构 来 进行 管理 ， 如 莱 单 栏 、 图 文 列表 、 分 类 导航 、 列 
表 页 、 栏 目 列表 等 。HTMLS 定义 了 一 套 列 表 标 签 ， 通 过 列表 结构 实现 对 网 页 信息 的 合理 排版 。 
另外 ， 网 页 中 还 会 包含 大 量 超 链接 ， 通 过 它 实 现 页 面 或 位 置 跳 转 ， 最 终 把 整个 网 站 、 整 个 互联 
网 连 在 一 起 。 列 表 结 构 与 超 链接 关系 紧密 ， 因 此 本 章 将 对 这 两 类 对 象 进行 详细 讲解 


【 学 习 要 点 】 

MH “正确 使 用 各 种 列表 标签 

MH 根据 网 页 具体 内 容 编 排列 表 版 式 
MW 能 够 正确 定义 各 种 类 型 的 超 链接 。 


莹 UVecrreassryuacnpe ws 和 站 到 精 道 ( 煞 估 半 多 版) 


5.1 新 建 列 表 


| HTML 列表 结构 可 以 分 为 两 种 基本 类 型 : 有 序列 表 和 无 序列 表 。 无 序列 表 使 用 项 目 符号 来 标识 列 


pie 表 ， 而 有 序列 表 则 使 用 编号 来 标识 列表 的 项 目 顺序 。 


5.1.1 无 序列 表 


| 无 序列 表 是 一 种 不 分 排序 的 列表 结构 ， 使 用 <ul> 标 签 定义 ， 在 <ul> 标 签 中 可 以 包含 多 个 <li> 标 签 
定义 的 列表 项 目 。 
【示例 1】 下 面 示例 使 用 无 序列 表 定 义 一 元 二 次 方程 的 求解 方法 ， 预 览 效果 如 图 5.1 所 示 。 
<h1> 解 一 元 二 次 方程 </h1> 
<p> 一 元 二 次 方程 求解 有 四 种 方法 :</p> 
<u> 





<1i> 配 方法 <i> 

<l> 公 式 法 <lli> 

<li> 分 解 因 式 法 <i> 
</ul> 


无 序列 表 可 以 分 为 一 级 无 序列 表 和 多 级 无 序列 表 ,一 级 无 序列 表 在 浏览 器 中 解析 后 ,会 在 每 个 列 
| 表 项 目前 面 添加 一 个 小 黑 点 的 修饰 符 ， 而 多 级 无 序列 表 则 会 根据 级 数 调整 列表 项 目 修饰 符 。 

【示例 2】 下 面 示例 在 页 面 中 设计 了 三 层 嵌 套 的 多 级 列表 结构 ， 浏 览 器 默认 解析 时 显示 效果 
| 如 


| 

| 

| 

| 

| 

| 

| 

| <1i> 直 接 开平 方法 <lli> 
| 

| 

| 

| 

| 

| 

| 图 5.2 所 示 。 





| x 
| ES oon € > ELT ET 
| 解 一 元 二 次 方程 委 列 表 项 上 1 

| 三 释 列 表 项 目 1 

| 一 元 二 次 方程 术 解 有 四 种 方法 ， 际 演 目 2 

| 三 级 列表 项 目 1 

| 三 级 列表 项 目 2 

| 包 列 表 项 目 2 

| 

| 

| 5.1 定义 无 序列 表 5.2 多 级 无 序列 表 的 默认 和 解析 效果 
| EE 

| <i> 一 级 列表 项 目 1 

| <ul> 

| <1i> 二 级 列表 项 目 1</li> 

| <li> 二 级 列表 项 目 2 

| <ul> 


<l> 三 级 列表 项 目 1</li> 
| <li> 三 级 列表 项 目 2</li> 
| </ul> 
| </> 
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</> 
<1i> 一 级 列表 项 目 2</li> 
<ul> 


通过 观察 图 52， 可 以 发 现 无 序列 表 在 嵌 套 结构 中 随 着 其 所 包含 的 列表 级 数 的 增加 而 逐渐 缩 进 ， 
并 且 随 着 列表 级 数 的 增加 而 改变 不 同 的 修饰 符 。 合 理 使 用 列表 结构 能 让 页 面 的 结构 更 加 清晰 。 
< 全 注意 : 以 下 几 种 无 序列 表 的 用 法 是 不 规范 的 ， 应 该 避免 出 现 。 


在 <ul> 标 签 跟 <li> 标 签 之 间 插 入 了 其 他 标签 。 | 
<ul> 





<1i> 列 表 项 目 1</li> 
<1i> 列 表 项 目 2</li> 
<div> 错 误 的 无 序列 表 嵌 套 结构 </div> 
<hl> 
对 于 上 面 代码 ， 应 该 将 <div> 标 签 放 到 <ul> 标 签 的 外 面 ， 或 者 删除 。 
不 规范 的 多 层 <ul> 标 签 谋 套 。 
<ul> 


<1i> 列 表 项 目 1</l> 
<ul> 
<I 记 错误 的 无 序列 表 嵌 套 结 构 </li> 


</ul> 
对 于 上 面 代 码 ， 应 该 将 <ul> 标 签 放 在 <li> 标 签 内 。 
<u> 
<li><u> | 
<1i> 嵌 套 列表 项 目 </li> | 
</ul></i> | 
<ul> | 
<1i> 标 签 未 关闭 。 
<u> 
<li> 列 表 项 目 1 
<unl> 


| 

<1i> 错 误 的 无 序列 表 嵌 套 结构 </li> | 

</ul> | 
<l 记 列表 项 目 2</li> 


</ul> 
对 于 上 面 代码 ， 应 该 使 用 结束 标签 </li> 为 第 一 个 <li> 标 签 关闭 标识 。 


5.1.2 有 序列 表 


有 序列 表 是 一 种 在 意 排序 位 置 的 列表 结构 ， 使 用 <ol> 标 签 定 义 ， 其 中 包含 多 个 <li> 列 表 项 目标 签 | 
构成 。 | 

一 般 网 页 设计 中 ， 列表 结构 可 以 互 用 有 序 或 无 序列 表 标签 。 但 是 ， 在 强调 项 目 排序 的 栏目 中 ， 选 
用 有 序列 表 会 更 科学 ， 如 新 闻 列 表 根 据 新 闻 时 间 排 序 )、 排 行 榜 (强调 项 目的 名 次 等 。 | 

【示例 1】 列 表 结 构 在 网 页 中 比较 常见 ， 其 应 用 范畴 比较 宽泛 ， 可 以 是 新 闻 列表 、 产 品 列表 , 也 | 
可 以 是 导航 、 菜 单 、 图 表 等 。 下 面 示例 显示 3 种 列表 应 用 样式 ， 效 果 如 图 5.3 所 示 。 

<h1> 列 表 应 用 </h1> 

<h2> 百 度 互 联网 新 闻 分 类 列表 </h2> 
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A 


| 

| <1> 网 友 热 论 网 络 文学 : 渐 入 主流 还 是 刹那 流星 ? </li> 
| <1i> 电 信封 杀 路 由 器 ? 消费 者 质疑 : 强迫 交易 </li> 
<1i> 大 学 生 创业 俱乐部 为 大 学 生 自主 创业 助力 <Ti> 


六 | </ol> 
医 网 | <h2> 爆 机 产品 型 号 列表 </h2> 


<u> 
I na < 
<] 记 空气 等 离子 切割 机 系列 </li> 
<1i> 氨 焊 / 手 弧 /切割 三 用 机 系列 <(i> 
<hl> 
<h2> 站 点 导航 菜单 列表 </h2> 
<u> 
<1i> 微 博 <Ai> 
<li> 社 区 <1i> 
<1i> 新 闻 </i> 
<l> 
【示例 2】 有 序列 表 也 可 分 为 一 级 有 序列 表 和 多 级 有 序列 表 ， 浏 览 器 默认 解析 时 都 是 将 有 序列 表 
以 阿拉 伯 数 字 表 示 ， 并 增加 缩 进 ， 如 图 5.4 所 示 。 


<ol> 
<li> 一 级 列表 项 目 1 
<ol> 
<1i> 二 级 列表 项 目 1</li> 
<1i> 二 级 列表 项 目 2 
<ol> 
<li> 三 级 列表 项 目 1</li> 
<li> 三 级 列表 项 目 2</li> 
</ol> 
</> 
</o> 


<> 
<li> 一 级 列表 项 目 2</li> 
</ol> 


| 
| 
| 
| 百度 互联 网 新 闻 分 类 列表 
| 
| 
| 


高 子 要 刘 机 东 列 
| “二 吉 手 她 到 三 册 册 系 列 
| 站 点 导航 菜单 列表 9 
| : 2 
| :地 





图 5.3 列表 的 应 用 形式 图 5.4 多 级 有 序列 表 默认 解析 效果 


<ol> 标 签 包含 3 个 比较 实用 的 属性 ， 这 些 属性 同时 获得 HIMLS 支持 ， 且 其 中 reversed 为 新 增 属 
| 性 。 具 体 说 明 如 表 5.1 所 示 。 
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表 5.1 <ol> 标 签 属性 








属 性 说 明 
reversed 定义 列表 顺序 为 降序 ， 如 9、8、7…… 
start 定义 有 序列 表 的 起 始 值 





定义 在 列表 中 使 用 的 标记 类 型 


【示例 3】 下 面 示例 设计 有 序列 表 降 序 显示 ， 序 列 的 起 始 值 为 5， 类 型 为 大 写 罗马 数字 ， 效 果 如 


图 5.5 所 示 。 


<oltype="T" start="5" reversed > 
<li> 黄 稚 楼 <span> 崔 旺 </span> </li> 
<li> 送 元 二 使 安西 <span> 王 维 </span> </li> 
<li> 凉 州 词 〈 黄 河 远 上 ) <span> 王 之 澳 </span> </li> 
<li> 登 蕉 汰 楼 <span> 王 之 澳 </span> </li> 
<li> 登 岳阳 楼 <span> 杜 甫 </span> </li> 

</ol> 


V- 碳 隐 忌 社 开 
JV. 送 元 二 使 安西 王 维 


有 1. 凉 州 词 《 黄河 远 上 ) 王 之 澳 
IL 登 首 走 榜 王 之 淘 
上 富 邱 阳 榨 杜 击 





图 5.5 在 Firefox 浏览 器 中 预览 效果 
5.1.3 ”描述 列表 


描述 列表 是 一 种 特殊 的 结构 ， 它 包括 词 条 和 解释 两 块 内 容 。 包 含 的 标签 说 明 如 下 : 
回 ”<dl>.…</dl>: 标识 描述 列表 。 
加 ”<dt>...</dt>: 标识 词 条 。 
回 ”<dd>.…</dd>: 标识 解释 。 
【示例 1】 下 面 示例 定义 了 一 个 中 药 词 条 列表 。 
<h2> 中 药 词 条 列表 </h2> 
<d> 
<d 忆 丹 皮 </di> 
<dd> 为 毛 万 科 多 年 生 落 叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 山 东 等 地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 
用 。</dd> 
<d> 


在 上 面 结构 中 ,“ 丹 皮 ” 是 词 条 ， 而 “为 毛 萌 科 多 年 生 落叶 小 灌木 植物 牡丹 的 根 皮 。 产 于 安徽 、 
山东 等 地 。 秋 季 采 收 ， 晒 干 。 生 用 或 炒 用 。” 是 对 词 条 进行 的 描述 〈 或 解释 )。 
【示例 2】 下 面 示例 使 用 描述 列表 显示 两 个 成 语 的 解释 。 
<hl> 成 语词 条 列表 </hl> 
<d> 
<d 忆 知 无 不 言 ， 言 无 不 尽 </dt> 
<dd> 知 道 的 就 说 ， 要 说 就 毫 无 保留 。</dd> 
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Ta ~ 人 A ( 竹 课 精 编 版) 
| -dr 智者 二 虑 ， 必 有 一 失 <dt> 
<dd> 不 管 多 聪明 的 人 ， 在 很 多 次 的 考虑 中 ， 也 一 定 会 出 现 个 别 错误 。</dd> 
| 


</d> 
| 次 提示 : 档 述 列表 与 无 序列 表 和 有 序列 表 存 在 着 结构 上 的 差异 性 ， 相 同 点 就 是 HTML 结构 必须 是 
如 下 形式 : 
<dl> 
本 
| <dd> 描 述 列表 内 容 </dd> 
| </dl> 
或 者 : 
<dl> 


| 
| <dt> 描 述 列表 标题 1</dt> 
| <dd> 描 述 列 表 内 容 1.1</dd> 
| <dd> 描 述 列表 内 容 1.2</dd> 
</dl> 
也 可 以 是 多 个 组 合 形式 : 
| <dl> 
| <d 必 描述 列表 标题 1</dt> 
| <dd> 描 述 列 表 内 容 1</dd> 
<dt> 描 述 列 表 标 题 2</dt> 
<dd> 描 述 列 表 内 容 2</dd> 
</dl> 


【示例 3】 同 一 个 dl 元 素 中 可 以 包含 多 个 词 条 。 例 如 ， 在 下 面 这 个 描述 列表 中 包含 了 两 个 词 条 ， 
介绍 花 围 中 花 的 种 类 ， 列 表 结构 代码 如 下 。 


<div class="flowers"> 

<hl> 花 围 中 的 花 <hl> 
| <d> 
| <dt> 玫 瑰 花 </dt> 
| <dd> 玫 瑰 花 ， 一 名 赤 蔷 薇 ， 为 蔷薇 科 落 叶 灌 木 。 茎 多 刺 。 花 有 紫 、 白 两 种 ， 形 似 蔷薇 和 月 季 。 一 
般 用 作 蜜 钱 、 糕 点 等 食品 的 配料 。 花 准 、 根 均 作 药 用 ， 入 药 多 用 紫 玫 瑰 。</dd> 

<dP 杜 鹏 花 </dt> 
<dd> 中 国 十 大 名 花 之 一 。 在 所 有 观赏 花木 之 中 ， 称 得 上 花 、 叶 兼 美 ， 地 栽 、 贫 栽 皆 宜 ， 用 途 最 为 

广泛 。 白 居 易 赞 掉 :“ 闲 折 二 枝 持 在 手 ， 细 看 不 似 人 间 有 ， 花 中 此 物 是 西施 ， 鞠 鞭 芍 药 皆 毁 母 ”"。 在 世界 杜 鹏 花 的 
自然 分 布 中 ， 种 类 之 多 、 数 量 之 巨 ， 没 有 一 个 能 与 中 国 匹敌 ， 中 国 ， 乃 世界 杜 鹏 花 资源 的 宝库 ! 今 江 西 、 安 徽 、 
贵州 以 杜 静 为 省 花 ， 定 为 市 花 的 城市 多 达 七 八 个 足见 人 们 对 杜 鹏 花 的 厚爱 。 杜 鹏 花 盛 开 之 时 ， 恰 值 杜 鹏 鸟 吵 之 
时, 古人 留 下 许多 诗句 和 优美 、 动人 的 传说 , 并 有 以 花 为 节 的 习俗 。 杜鹃 花 多 为 灌木 或 小 乔木 , 因 生态 环境 不 同 ， 
， 有 各 自 的 生活 习性 和 形状 。 最 小 的 植株 只 有 几 厘 米 高 ， 呈 垫 状 ， 贴 地 面 生 。 最 大 的 高 达 数 丈 ， 强 然 挺 立 ， 蔚 为 壮 
， 观 。</dd> 
| </d> 
| </div> 
| 
| 当 列 表 结 构 的 内 容 集 中 时 , 可 以 适当 添加 一 个 标题 ,描述 列表 内 部 主要 通过 定义 标题 以 及 定义 内 
| 容 项 帮助 浏览 者 明白 该 列表 中 所 存在 的 关系 以 及 相关 介绍 。 

当 介绍 花 团 中 花 的 品种 时 ， 先 说 明 主题 ,其 次 再 分 别 介绍 花 的 种 类 以 及 针对 不 同 种 类 的 花 进行 详 
细 介 绍 ， 演 示 效 果 如 图 5.6 所 示 。 
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二 1> 花 围 中 的 花 </h1> 
< 小 玫瑰 花 ， 一 | 花园 中 的 花 
















<dr> 杜 鹏 花 </dr> | 、 和 4 
- 这 





图 5.6 描述 列表 结构 分 析 图 


dl、dt 和 dd 元 素 不 仅仅 是 为 了 解释 词 条 ， 在 语义 结构 中 ， 不 再 把 描述 列表 看 作 是 一 种 词 条 解释 
结构 。 至 于 dt 元 素 包含 的 内 容 是 一 个 真正 意义 上 的 词 条 ， 还 是 dd 元 素 包含 的 是 一 个 真正 意义 上 的 解 
释 ， 对 于 和 搜索 引擎 来 说 都 不 重要 了 。 
一 般 来 说 ， 搜 索引 擎 仅 认为 dt 元 素 包含 的 是 抽象 、 概 括 或 简练 的 内 容 ， 对 应 的 dd 元 素 包含 的 是 | 
与 由 内 容 相关 联 的 具体 、 详 细 或 生动 说 明 。 
【示例 4】 下 面 代 码 使 用 <ul> 标 签 设计 一 个 列表 结构 。 
<ul> 
<1i> 小 时 代 2.6.3.10</li> 
<1i> 软 件 大 小 : 2431 KB</li> 
<li> 软 件 语言 :简体 中 文 <H> 
<li> 软 件 类 别 : 国产 软件 /免费 软件 /文件 共享 <li> 
</ul> 


【示例 5】 从 结构 分 析 ， 示 例 4 的 代码 设计 没有 问题 ， 在 表现 效果 上 也 许 会 更 容易 控制 。 不 过 从 
语义 角度 来 考虑 ， 对 于 这 类 的 信息 使 用 定义 结构 会 更 恰当 一 些 。 
<d> 
<dP 软 件 名 称 </d> | 
<dd> 小 时 代 2.6.3.10</dd> | 
<dt> 软 件 大 小 </dt> | 
<dd>2431 KB</dd> 
<dt> 软 件 语言 4dt> 
<dd> 简 体 中 文 </dd> 
<dt> 软 件 类 别 </dt> 
<dd> 国 产 软件 /免费 软件 /文件 共享 </dd> 
</dl> 


对 于 “<I> 软 件 大 小 : 2431 KB </li>” 这 个 项 目 ， 它 实际 上 包含 了 两 部 分 信息 :第 一 部 分 是 信息 | 
的 名 称 ( 即 “软件 大 小 ”)， 第 二 部 分 是 信息 的 具体 内 容 ( 即 “2431 KB”)。 对 于 描述 列表 来 说 ， 当 自 
动 检索 到 “<dt> 软 件 大 小 </dt>” 时 ， 立 即 知道 它 是 一 个 标题 ， 而 检索 到 “<dd>2431 KB</dd>” 时 就 
知道 它 是 上 面 标题 对 应 的 具体 信息 。 
5.1.4 菜单 列表 


HTML5 重新 定义 了 被 HTML4 弃 用 的 <menu> 标 签 。 使 用 <menu> 标 签 可 以 定义 命令 的 列表 或 菜 
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单 ， 如 上 下 文 菜单 、 工 具 栏 ， 以 及 列 出 表单 控件 和 命令 。<menu> 标 签 中 可 以 包含 <command> 和 
<menuitem> 标 签 ， 用 于 定义 命令 和 项 目 。 

【示例 1】 下 面 示例 配合 使 用 <menu> 和 <command> 标 签 ， 定 义 一 个 命令 ， 当 单 击 该 命令 时 ， 将 
食 内 ”弹出 提示 对 话 框 ， 如 图 5.7 所 示 。 


| <menu> 
Note <command onclick="alert(Hello World)"> 命 令 </command> 
</menu> 


| <command> 标 签 可 以 定义 命令 按钮 , 如 单 选 按钮 、 复 选 框 或 按钮 只 有 当 command 元 素 位 于 menu 
| 元素 内 时 ， 该 元 素 才 是 可 见 的 ， 否 则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 定义 键盘 快捷 键 。 
目前 ， 只 有 下 9 (更 早 或 更 晚 的 版 本 都 不 支持 ) 和 最 新 版 本 的 Firefox 支持 <command> 标 签 。 
<command> 标 签 包含 很 多 属性 ， 专 门 用 来 定制 命令 的 显示 样式 和 行为 ， 说 明 如 表 5.2 所 示 。 


表 5.2 <command> 标 签 属性 
说 阴 
定义 是 否 被 选中 。 仅 用 于 radio 或 checkbox 类 型 
定义 command 是 否 可 用 
定义 作为 command 来 显示 的 图 像 的 url 
为 command 定义 可 见 的 label 
定义 command 所 属 的 组 名 。 仅 在 类 型 为 radio 时 使 用 
checkbox、command、radio 定义 该 command 的 类 型 。 默 认 值 为 command 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 【示例 2】 下 面 示例 使 用 <command> 标 签 各 种 属性 定义 一 组 单 选 按钮 命令 组 ， 演 示 效 果 如 图 5.8 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 





| 所 示 。 目 前 还 没有 浏览 器 完全 支持 这 些 属性 。 
| <menu> 
<command icon="images/1.png" onclick="alert( 男 士 )" type="radio" radiogroup="groupl" label=" 男 士 "> 男 
士 </command> 
| <command icon="images/2.png" onclick="alert( 女 士 )" type="radio" radiogroup="group1" label=" 女 士 "> 女 
， 士 < command> 
| <command icon="images/3.png”onclick="alert(' 未 知 )" type="radio" radiogroup="group1" label=" 未 知 "> 未 
， 知 <command> 
</menu> 





图 5.7 定义 菜单 命令 图 5.8 定义 单 选 按 钮 命令 组 


| 
”<menu> 标 签 也 包含 两 个 专用 属性 ， 简 单 说 明 如 下 : 
| label: 定义 菜单 的 可 见 标签 。 
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type: 定义 要 显示 哪 种 菜单 类 型 ， 取 值 说 明 如 下 。 
学 list: 默认 值 ， 描 述 列表 菜单 。 一 个 用 户 可 执行 或 激活 的 命令 列表 (li 元素 )。 | 
党 context: 定义 上 下 文 菜单 。 该 菜单 必须 在 用 户 能 够 与 命令 进行 交互 之 前 被 激活 。 | 
党 toolbar: 定义 工具 栏 菜单 。 活 动 式 命令 ， 人 允许 用 户 立 即 与 命令 进行 交互 。 | 
【示例 3】 下 面 示 例 使 用 type 属性 定义 了 两 组 工具 条 按钮 ， 演 示 效 果 如 图 5.9 所 示 。 
<menu type="toolbar"> 
<li> | 
<menu label="File" type="toolbar"> | 
<button type="button" onclick="file_new0"> 新 建 ...</button> 
<button type="button" onclick="file open0"> 打 开 …</button> 
<button type="button" onclick="file save0"> 保 存 </button> 
</menu> 
</> 
<li> 





<menu label="Edit" type= "toolbar"> 
<button type="button" oncjick="edit_cutO"> 前 切 </button> 
<button type="button" onclick="edit_copy0"> 复 制 </button> 
<button type="button" onclick="edit_paste0"> 粘 贴 </button> 





</menu> | 
</menu> | 
httpy/ocalhos/ies3heml Xx | 
3 | 
localhoeVrest htm | 
| 
| 

图 5.9 定义 工具 条 命令 组 

5.1.5 快捷 菜单 





<menuitem> 标 签 用 来 定义 菜单 项 目 ， 这 些 菜单 项 目 仅 用 作 弹 出 菜单 的 命令 ， 方 便 用 户 快捷 调用 。 | 
目前 ， 仅 有 Firefox 8.0+ 版 本 浏览 器 支持 <menuitem> 标 签 。 | 
【示例 1】menu 和 menuitem 元 素 一 起 使 用 ， 将 把 新 的 菜单 合并 到 本 地 的 上 下 文 菜单 中 。 例 如 ， | 
给 body 添加 一 个 “Hello World” 的 菜单 。 | 
<style type="text/css"> 
html body { height:100%:} 
</style> 
<body contextmenu="new-context-menu"> 
<menu id="new-context-menu" type="context"> 
<menuitem>Hello World</menuitem> 
</menu> 


在 上 面 示例 代码 中 ， 包 含 的 基本 属性 有 id、type 和 contextmenu， 指 定 了 菜单 类 型 是 context， 同 
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| 时 也 指定 了 新 的 菜单 项 应 该 被 显示 的 区 域 。 在 本 示例 中 ， 当 右 击 后， 新 的 菜单 项 将 出 现在 文档 的 任何 
| 地 方 ， 效 果 如 图 5.10 所 示 。 
| 【示例 2】 也 可 以 通过 在 特定 的 元 素 上 给 contextmenu 属性 赋值 ， 来 限制 新 菜单 项 的 作用 区 域 。 
缚 站 ”” 下 面 示例 将 为 <h1> 标 签 统 定 一 个 上 下 文 菜单 。 


| <hl contextmenu="new-context-menu"> 使 用 &lt:menuitem&gt: 标 签 设计 弹出 菜单 </h1> 


<menu id="new-context-menu" type="context"> 
| <menuitem>Hello World</menuitem> 
</menu> 
| 当 在 Firefox 中 查看 时 ， 会 发 现 新 添加 的 菜单 项 被 添加 到 右键 快捷 菜单 最 项 部 。 
| 【示例 3】 为 快捷 菜单 添加 子 菜单 和 图 标 。 子 菜单 由 一 组 相似 或 相互 的 菜单 项 组 成 。 下 面 示例 演 
| 





<img src="images/1.png" width="500" contextmenu="demo-image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
| <menuitem> 旋 转 90 度 </menuitem> 
| <menuitem> 旋 转 180 度 </menuitem> 
| <menuitem> 水 平 翻转 </menuitem> 
<menuitem> 垂 直 翻 转 </menuitem> 
</menu> 
</menu> 


heips/flocalhosyiestL heml 。 X 


可 localhosthestih 





5.10 为 body 添加 上 下 文 菜单 5.11 为 图 片 添加 子 菜单 项 目 
<menuitem> 标 签 包含 很 多 属性 ， 具 体 说 明 如 表 5.3 所 示 。 


表 5.3 <menuitem> 标 签 属性 







描述 














| 定义 在 页 面 加 载 后 选中 命令 /菜单 项 目 。 仅 适用 于 type="radio" 或 
type= "checkbox” 

defoult | aefauit 把 命令 /菜单 项 设置 为 默认 命令 

| _disabled | disabled 定义 命令 /菜单 项 应 该 被 禁用 

| icon URL 定义 命令 /菜单 项 的 图 标 
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属 性 
open | open 
label | text 


值 描述 





定义 details 是 否 可 见 
必需 。 定 义 命令 /菜单 项 的 名 称 ， 以 向 用 户 显示 

定义 命令 组 的 名 称 ， 命 令 组 会 在 命令 /菜单 项 本 身 被 切换 时 进行 切换 。 
仅 适用 于 type= "radio" 


定义 命令 /菜单 项 的 类 型 | 








Tadiogroup | groupname 










checkbox、command、 


Tadio 
【示例 4】 下 面 示例 使 用 icon 属性 在 菜单 的 旁边 添加 图 标 ， 演 示 效 果 如 图 5.12 所 示 。 


<img src="images/1 .png" width="500" contextmenu="demo-image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
<menuitem icon="images/icon1.png"> 旋 转 90 度 </menuitem> 
<menuitem icon="images/icon2.png"> 旋 转 180 度 </menuitem> 
<menuitem icon="images/icon4.png"> 水 平 翻转 </menuitem> 
<menuitem icon="images/icon3.png"> 垂 直 翻 转 </menuitem> | 
</menu> | 
</menu> | 
| 











1 

et | 
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图 5.12 为 菜单 项 目 添加 图 标 
< 币 注意 : icon 属性 只 能 在 menuitem 元 素 中 使 用 。 


5.2 定义 超 链接 


在 网 页 中 定义 超 链接 需要 两 个 基本 要 素 : 设置 为 超 链接 的 网 页 对 象 ， 为 超 链接 指向 的 目标 地 址 
URL。 | 
| 
5.2.1” 超 链接 分 类 
1. 根据 链接 目标 
如 果 根 据 URL 不 同 ， 网 页 中 的 超 链接 一 般 可 以 分 为 3 种 类 型 : 
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有 A (最 名 本 个 到) 


全 fF | 内 部 链接 所 链接 的 目标 一 般 位 于 同一 个 网 站 中 ,对 于 内 部 链接 来 说 , 可 以 使 用 相对 路 径 和 绝对 路 
”| 径 。 所 谓 相 对 路 径 就 是 URL 中 没有 指定 超 链接 的 协议 和 互联 网 位 置 ， 仅 指定 相对 位 置 关 系 。 
Note | 例如 ， 如 果 ahtml 和 b.html 位 于 同一 目录 下 ， 则 直接 指定 文件 (bhtml) 即 可 ， 因 为 它们 的 相对 

| 位 置 关系 是 平等 的 。 如 果 b.html 位 于 本 目录 的 下 一 级 目录 (sub) 中 ， 则 可 以 使 用 “sub / b.html” 相 

| 对 路 径 即 可 。 如 果 b.html 位 于 上 一 级 目录 (father) 中 ， 则 可 以 使 用 “../b.html” 相 对 路 径 即 可 ， 其 中 
“..” 符 号 表示 父 级 目录 。 还 可 以 使 用 “/” 来 定义 站 点 根 目录 ， 如 “/bhtml” 就 表示 链接 到 站 点 根 目 
录 下 的 bhtml 文件 。 

外 部 链接 所 链接 的 目标 一 般 为 外 部 网 站 目标 ， 当 然 也 可 以 是 网 站 内 部 目标 。 外 部 链接 一 般 要 指定 
链接 所 使 用 的 协议 和 网 站 地 址 ， 例 如 ，http:/www.mysite.cn/web2_nav/index.html， 其 中 http 是 传输 协 
议 ，www.mysite.cn 表示 网 站 地 址 ， 后 面 跟随 字符 是 站 点 相对 地 址 。 

锚 点 链接 是 一 种 特殊 的 链接 方式 ， 实 际 上 它 是 在 内 部 链接 或 外 部 链接 基础 上 增加 锚 标 记 后 级 (# 标 
记名 )， 例 如 ，http://www.mysite.cn/web2_nav/index.html#anchor， 就 表示 跳 转 到 index.htm 页 面 中 标记 
为 anchor 的 锚 点 位 置 。 

2. 根据 链接 对 象 

如 果 根 据 超 链接 包 庄 的 对 象 的 不 同 ， 网 页 中 的 链接 又 可 以 分 为 文本 超 链 接 、 图 像 超 链接 、E-mail 
链接 、 锚 点 链接 、 多 媒体 文件 链接 、 空 链接 等 。 

【补充 】 

URL (Uniform Resource Locator， 统 一 资源 定位 器 ) 主要 用 于 指定 网 上 资源 的 位 置 和 方式 。 一 个 
URL 一 般 由 下 列 3 部 分 组 成 。 

回 第 1 部 分 : 协议 (或 服务 方式 ) 。 

第 2 部 分 : 存 有 该 资源 的 主机 人 P 地 址 《有 时 也 包括 端口 号 ) 。 

回 第 3 部 分 : 主机 资源 的 具体 地 址 ， 如 目录 和 文件 名 等 。 

例如 , protocol://machinename[:port]/directory/filename, 其 中 protocol 是 访问 该 资源 所 采用 的 协议 ， 
即 访问 该 资源 的 方法 ， 简 单 说 明 如 下 : 

http://: 超 文本 传输 协议 ， 表 示 该 资源 是 HTML 文件 。 

ftp://: 文件 传输 协议 ， 表 示 用 FTP 传输 方式 访问 该 资源 。 

mailto:: 表示 该 资源 是 电子 邮件 (不 需要 两 条 斜 杠 )。 

file://: 表示 本 地 文件 。 
| machinename 表示 存放 该 资源 的 主机 的 他 地址， 通常 以 字符 形式 出 现 ， 如 www.china.com.port。 
| 其 中 port 是 服务 器 在 该 主机 所 使 用 的 端口 号 , 一 般 情况 下 不 需要 指定 , 只 有 当 服 务 器 所 使 用 的 不 是 默 
| 认 的 端口 号 时 才 指定 。directory 和 filename 是 该 资源 的 路 径 和 文件 名 。 


| 5.2.2 使 用 <a> 标 签 


HTMLS5 使 用 <a> 标 签 定义 超 链接 ， 设 计 从 一 个 页 面 链接 到 另 一 个 页 面 。<a> 最 重要 的 属性 是 href 
| 属性 ， 它 指示 链接 的 目标 。 用 法 如 下 : 
<a href="#"> 链 接 文 本 </a> 
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【示例 1】 下 面 代码 定义 一 个 超 链接 文本 ， 单 击 该 文本 将 跳 转 到 百度 首页 。 
<a href="https://www.baidu.com/"> 百 度 一 下 </a> 
<a> 标 签 包含 众多 属性 ， 其 中 被 HTML5 支持 的 属性 如 表 5.4 所 示 。 
表 5.4 <a> 标 签 属性 

















属 性 取 
download | filename 
href | uRr 


值 说 明 
规定 被 下 载 的 超 链接 目标 
规定 链接 指向 的 页 面 的 URL 
规定 被 链接 文档 的 语言 
规定 被 链接 文档 是 为 何 种 媒介 /设备 优化 的 
规定 当前 文档 与 被 链接 文档 之 间 的 关系 

规定 在 何 处 打开 链接 文档 
规定 被 链接 文档 的 MIME 类 型 


疱 提示 : 如 果 不 使 用 href 属性 ， 则 不 可 以 使 用 如 下 属性 : download、hreflang、media、rel、target 以 
及 type 属性 。 
在 默认 状态 下 ,被 链接 页 面 会 显示 在 当前 浏览 器 窗口 中 ,可 以 使 用 target 属性 改变 页 面 显 
示 的 窗口 。 
【示例 2】 下 面 代码 定义 一 个 超 链接 文本 ， 当 单 击 该 文本 时 将 在 新 的 标签 页 中 显示 百度 首页 。 
<a href="https://www.baidu.com/" target="” blank"> 百 度 一 下 </a> 
容 提示: 在 HTML4 中 ，<a> 标 签 可 以 定义 超 链接 ， 或 者 定义 锚 点 。 但 是 在 HTML5 中 ，<a> 标 签 只 
能 定义 超 链接 ， 如 果 未 设置 htef 属性 ， 则 只 是 超 链接 的 占 位 符 ， 而 不 再 是 一 个 锚 点 。 
用 来 定义 超 链接 的 对 象 ， 可 以 是 一 段 文 本 ， 或 者 是 一 个 图 片 ， 甚 至 是 页 面 任何 对 象 。 当 济 
览 者 单 击 已 经 链接 的 文字 或 图 片 后 ， 被 链接 的 目标 将 显示 在 浏览 器 上 ， 并 且 根据 目标 的 类 
型 来 打开 或 运行。 




































【示例 3】 下 面 示例 为 图 像 绑 定 一 个 超 链 接 ， 这 样 当 用 户 单 击 图 像 时 ， 会 跳 转 到 指定 的 网 址 , 效 | 





果 如 图 5.13 所 示 。 
<a href="https://www.baidu.com/" target=" blank"> 
<img src="images/logo.png" width="300" /> 
</a> 





图 5.13 为 图 像 定义 超 链接 效果 
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;5.2.3 ”定义 锚 点 链接 


| 锚 点 链接 是 指定 向 同一 页 面 或 者 其 他 页 面 中 的 特定 位 置 的 链接 。 例如， 在 一 个 很 长 的 页 面 ， 在 页 
| 面 的 底部 设置 一 个 锚 点 ， 单 击 后 可 以 跳 转 到 页 面 顶部 ， 这 样 避免 了 上 下 滚动 的 麻烦 。 

例如 ， 在 页 面 内 容 的 标题 上 设置 锚 点 ， 然 后 在 页 面 顶部 设置 锚 点 的 链接 ， 这 样 就 可 以 通过 链接 快 
速 地 浏览 具体 内 容 。 

创建 锚 点 链接 的 步骤 如 下 : 
| 第 1 步 ， 创 建 用 于 链接 的 锚 点 。 任 何 被 定义 了 ID 值 的 元 素 都 可 以 作为 锚 点 标记 ， 就 可 以 定义 指 
| 向 该 位 置 点 的 错 点 链接 了 。 注 意 ， 给 页 面 标签 的 ZD 错 点 命名 时 不 要 含有 空格 ， 同 时 不 要 置 于 绝对 定 
| 位 元 素 内 。 
第 2 步 , 在 当前 页 面 或 者 其 他 页 面 不 同位 置 定义 超 链接 , 为 <a> 标 签 设 置 href 属性 ,属性 值 为 “##+ 
| 锚 点 名 称 ” 如 输入 “元 4”。 如 果 链接 到 不 同 的 页 面 ， 如 test.html， 则 输入 “test.html#p4”， 可 以 使 用 
| 绝对 路 径 ， 也 可 以 使 用 相对 路 径 。 注 意 ， 锚 点 名 称 是 区 分 大 小 写 的 。 
| 【示例 】 下 面 示例 定义 一 个 锚 链接 ， 链 接 到 同一 个 页 面 的 不 同位 置 ， 效 果 如 图 5.14 所 示 。 当 单 
| 击 网 页 项 部 的 文本 链接 后 ， 会 跳 转 到 页 面 底部 的 图 片 4 所 在 的 位 置 。 
| <!doctype html> 
| <body> 
| <p><a hre 伍 "加 4"> 查 看 图 片 4</a> </p> 
| <h2> 图 片 1<h2> 
| <p><img sre="images/1 jpg" /></p> 
| <h2> 图 片 2</h2> 
| 
| 
| 
| 
| 
| 
| 
| 
| 





<p><img SIc="images/2.jpg" /></p> 
<h2> 图 片 3</h2> 

<p><img Src= images/3:jpg" /></p> 
<h2 id="p4"> 图 片 4</h2> 
<p><img ste="images/4.jpg" /></p> 
<h2> 图 片 5</h2> 

<p><img src="images/$.ipg" /></p> 
<h2> 图 片 6</h2> 

<p><img sre="images/6.jpg" /></p> 
</body> 





图 5.14 定义 锚 链接 
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5.2.4 ”定义 目标 链接 
Pe 
超 链接 指向 的 目标 对 象 可 以 是 不 同 的 网 页 , 也 可 以 是 相同 网 页 内 的 不 同位 置 , 还 可 以 是 一 张 图 片 、| 视频 讲解 


一 个 电子 邮件 地 址 、 一 个 文件 、FTP 服务 器 ， 甚 至 是 一 个 应 用 程序 ， 也 可 以 是 一 段 JavaSeript 脚本 。 | 
【示例 1】<a> 标 签 的 href 属性 指向 链接 的 目标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 器 能 够 识别 | 一 一 
的 类 型 ， 会 直接 在 浏览 器 中 显示 如 果 是 浏览 器 不 能 识别 的 类 型 ， 会 弹出 “文件 下 载 ” 对 话 框 ， 允许 
用 户 下 载 到 本 地 ， 演 示 效 果 如 图 5.15 所 示 。 | 
<p><a hre 人 "images/1.jpg"> 链 接 到 图 片 </a> </p> | 
<p><a href="demo.html"> 链 接 到 网 页 </a> </p> 
<p><a href="demo.docx"> 链 接 到 Word 文档 </a> </p> 








> HIO) 
Tp. 


保有 GE) 


2» SHA) 





图 5.15 下 载 Word 文 档 


定义 超 链接 地 址 为 邮箱 地 址 即 为 E-mail 链接 。 通 过 E-mail 链接 可 以 为 用 户 提供 方便 的 反馈 与 交 | 
流 机 会 。 当 浏览 者 单 击 邮件 链接 时 ， 会 自动 打开 客户 端 浏览 器 默认 的 电子 邮件 处 理 程序 (如 Outlook 
Express)， 收 件 人 邮件 地 址 被 电子 邮件 链接 中 指定 的 地 址 自动 更 新 ， 浏 览 者 不 用 手工 输入 。 | 
创建 E-mail 链接 方法 : 为 <a> 标 签 设置 href 属性 ， 属 性 值 为 “mailto:+ 电 子 邮件 地 址 +?+subjectr+ | 
邮件 主题 ” 其 中 subject 表示 邮件 主题 ， 为 可 选项 目 ， 例 如 ，mailto:namee@mysite.cn?subjec 人 = 意见 和 
建议 。 


【示例 2】 下 面 示例 使 用 <a> 标 签 创 建 电 子 邮 件 链接 。 | 
<a hre 人 ="mailto:namee(@mysite.cn">namee@mysite.cn</a> | 
< 所 注意 :如 果 为 href 属性 设置 “#5 ， 则 表示 一 个 空 链接 ， 单 击 空 链接 ， 页 面 不 会 发 生变 化 。 

<a hre 伍 "#"> 空 链接 </a> 


如 果 为 href 属性 设置 JavaScript 脚本 ， 单 击 脚本 链接 ， 将 会 执行 脚本 。 | 
<a href="javascript:alert(&quot: 谢 谢 关 注 ， 投 票 已 结束 。&quot:;):"> 我 要 投票 </a> | 


5.2.5 ”定义 下 载 链接 


当 被 链接 的 文件 不 被 浏览 器 解析 时 ， 如 二 进 制 文件 、 压 缩 文件 等 ， 便 被 浏览 器 直接 下 载 到 本 地 计 | 视频 讲解 
算 机 中 ， 这 种 链接 形式 就 是 下 载 链接 。 | 
对 于 能 够 被 浏览 器 解析 的 目标 对 象 ， 用 户 可 以 使 用 HIML5 新 增 属性 download 强制 浏览 器 执行 ， 
下 载 操作 。 | 
【示例 】 下 面 示例 比较 了 超 链接 使 用 download 和 不 使 用 download 的 区 别 。 | 
<p><a href="images/1.jpg" download > 下 载 图 片 <a></p> | 
<p><a hre 全 "images/1.jpg" > 浏览 图 片 </a></p> LL 
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| 

| 您 提示 : 目前 ， 只 有 Firefox 和 Chrome 浏览 器 支持 download 属性 。 
| 

| 


会 内 5.2.6 ”定义 图 像 热点 
”图像 热 点 就 是 为 图 像 的 局 部 区 域 定义 超 链 接 ， 当 单 击 该 热点 区 域 时 会 触发 超 链接 ， 并 跳 转 到 其 他 


网 页 或 网 页 的 某 个 位 置 。 
| 图 像 热 点 是 一 种 特殊 的 超 链接 形式 ， 常 用 来 在 图 像 中 设置 导航 。 在 一 幅 图 上 定义 多 个 热点 区 域 ， 
以 实现 单 击 不 同 的 热 区 链接 到 不 同 页 面 。 
定义 图 像 热点 ， 需 要 <map> 和 <area> 标 签 配合 使 用 。 具 体 说 明 如 下 : 
加 ”<map>: 定义 热点 区 域 。 包 含 必需 的 id 属性 ， 定 义 热点 区 域 的 ID， 或 者 定义 可 选 的 name 





























属性 ， 也 可 以 作为 一 个 句柄 ， 与 热点 图 像 进行 绑 定 。 

<img> 中 的 usemap 属性 可 引用 <map> 中 的 id 或 name 属性 〈 根 据 浏览 器 )， 所 以 应 同时 
向 <map> 添 加 id 和 name 属性 ， 且 设置 相同 的 值 。 

加 ”<area>: 定义 图 像 映射 中 的 区 域 ，area 元 素 必 须 嵌 套 在 <map> 标 签 中 。 该 标签 包含 一 个 必 
须 设置 的 属性 alt， 定 义 热点 区 域 的 替换 文本 。 该 标签 还 包含 多 个 可 选 属性 ， 说 明 如 表 5.5 
所 示 。 





表 5.5 <area> 标 签 属性 








说 明 
定义 可 单 击 区 域 (对 鼠标 敏感 的 区 域 》 的 坐标 
定义 此 区 域 的 目标 URL 

从 图 像 映射 排除 菜 个 区 域 

default、 rect (矩形 )、circ 

( 圆 形 )、poly (多 边 形 ) 征 允 取代 的 形状 


规定 在 何 处 打开 href 属性 指定 的 目标 URL 





| 
| _blank、_parent、_self 
| top 


【示例 】 下 面 示例 具体 演示 了 如 何 为 一 幅 图 片 定义 多 个 热点 区 域 ， 演 示 效 果 如 图 5.16 所 示 。 


| <img Src="images/bg.jpg" width="1003" height="1053" usemap="#Map" border="0"> 
| <map name="Map" id="Map"> 
| <area shape="rect" coords="798.57.894.121" href="http://wo.2126.com/?tmcid=187" target=" blank" alt=" 沃 
| 尔 学 院 "> 
| <area shape="rect" coords="697.57.793.121" href="http://web.2126.conyddt/" target="”blank" alt=" 弹 弹 堂 "> 
<area shape="rect" coords="591.57.687.121" href="http://hero.61.cony" target=" blank" alt=" 摩 尔 勇士 "> 
| <area shape="rect" coords="488.57.584.121" href="http://hua.61.com/" target=” blank" alt=" 小 花 仙 "> 
| <area shape="rect" coords="384.57.480.121" href="http://gf.61.cony/" target=”blank" alt=" 功 夫 派 "> 
| <area shape="rect" coords="279.57.375.121" href="http://seer2.61.com/" target=" blank" alt=" 赛 尔 号 2"> 
<area shape="rect" coords="69.57.165.121" href="http://v.61.com/" target="” blank" alt=" 淘 米 视频 "> 
<area shape="rect" coords="175.57.271.121" href="http://seer.61.com/" target=”blank" alt=" 赛 尔 号 "> 
/map> 


| 
| 次 提示 定义 图 像 热 点 ， 建 议 用 户 借助 Dreamweaver 可 视 化 设计 视图 快速 实现 ， 因 为 设置 坐标 是 
| 一 件 费 力 不 讨 好 的 烦 顷 工作， 可视化 操作 如 图 5.17 所 示 。 
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图 5.16 定义 热点 区 域 





donhiml | 2 一 
LE 十 a 
Ed 








(地 油 测 网 “加 zsg 二 四 Fr3 J 三 帮 32 4 和 TS 勇士 of 阁 玫 STM 2 RE 1 





FITTS 





DO Saxe 





























图 5.17 借助 Dreamweaver 快速 定义 热点 区 域 
5.2.7 ”定义 框架 链接 


HTMLS5 已 经 不 支持 frameset 框架 ， 但 是 它 仍然 支持 这 ame 浮动 框架 的 使 用 。 浮 动 框架 可 以 自由 | 
控制 窗口 大 小 ， 可 以 配合 网 页 布局 在 任何 位 置 插 入 窗口 ， 实 际 上 就 是 在 窗口 中 再 创建 一 个 窗口 。 | 
使 用 这 ame 创建 浮动 框架 的 用 法 如 下 : 
<iframe src="URL"> 
src 表示 浮动 框架 中 显示 网 页 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 | 
【示例 】 下 面 示例 是 在 浮动 框架 中 链接 到 百度 首页 ， 显 示 效果 如 图 5.18 所 示 。 | 
<iframe src="http://www.baidu.com"></iframe> | 





[sw " 国 








| 
| 
图 5.18 使 用 浮动 框架 L 
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| 从 图 5.18 可 以 看 到 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 。 在 默认 情况 下 ， 浮 动 框架 的 宽度 和 
| 高 度 为 220X120。 如 果 需 要 调整 浮动 框架 的 尺寸 ， 应 该 使 用 CSS 样式 。 
| <iframe> 标 签 包含 多 个 属性 ， 其 中 被 HTML5 支持 或 新 增 的 属性 如 表 5.6 所 示 。 














国生 表 5.6 <iframe> 标 签 属性 
| 
属 性 取 值 说 了 明 
frameborder 10 规定 是 否 显 示 框架 周围 的 边框 
| height pixels、% 规定 过 ame 的 高 度 
| longdesc URL 规定 一 个 页 面 ， 该 页 面包 含 了 有 关 这 ame 的 较 长 描述 
| _marginheight pixels 定义 <iframe> 的 顶部 和 底部 的 边 距 
| marginwidth pixels 定义 <iframe> 的 左 侧 和 右 侧 的 边 距 
| _name frame name 规定 <iframe> 的 名 称 
| mm 
| allow-forms 
sandbox allow-same-origin 启用 一 系列 对 <iframe> 中 内 容 的 额外 限制 


allow-scripts 
allow-top-navigation 





scrolling yes、no、auto 规定 是 否 在 <iftame> 中 显示 滚动 条 
seamless seamless 规定 <iframe> 看 上 去 像 是 包含 文档 的 一 部 分 
STC URL 规定 在 <iftame> 中 显示 的 文档 的 URL 
| _srcdoc HIML code 规定 在 <iftrame> 中 显示 的 页 面 的 HTML 内 容 
| width pixels、% 定义 <iframe> 的 宽度 
| 


5.3 案例 实战 


| 下 面 通过 几 个 案例 演示 如 何在 页 面 中 应 用 列表 结构 和 超 链接 。 
| 4 角 注意 ， 木 节 示例 涉及 CSS3 和 JavaSeript 基础 知识 ， 如 果 读者 不 熟悉 CSS3 和 JavaSeript， 建 议 先 
| 跳 过 本 节 内 容 ， 当 学 习 完 本 书后 面 章 节 内 容 之 后 ， 再 回头 补 学 本 节 内 容 。 


5.3.1 为 快捷 菜单 添加 命令 


| 在 5.1.5 节 中 ， 构 建 了 弹出 菜单 的 示例 ， 但 是 没有 任何 功能 ， 本 节 将 介绍 如 何 使 用 JavaScript 实 
| 现 这 些 功 能 。 

| 【示例 】 针 对 5.1.5 节 示例 3 的 HTML 代码 ， 为 它 添加 一 个 当 单 击 时 旋转 图 像 的 功能 。 本 例 将 使 
| 用 CSS3 的 transform 和 transition 功能 ， 可 以 在 浏览 器 中 实现 旋转 功能 。 

pe 

function imageRotation(name) { 
| document.getElementById(image').className = name: 

} 
</scrip> 
| <style> 
Totate-90 { transform: Totate(90deg)} 
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Iotate-180 { transform: rotate(180deg)} 
.flip-horizontal { transform: scaleX(-1)} 
flip-vertical { transform: scaleY(-1)} 
</style> 


<img src="images/1.png" width="500" contextmenu="demo-image" id="image" /> 
<menu id="demo-image" type="context"> 
<menu label=" 旋 转 图 像 "> 
<menuitem icon="images/icon1.png" onclick="imageRotation(rotate-90)" > 旋转 90 度 </menuitem> | 
<menuitem icon="images/icon2.png" onclick="imageRotation(rotate-180)"> 旋 转 180 度 </menuitem> | 
<menuitem icon="images/icon4.png" onclick="imageRotation('flip-horizontal)"> 水 平 翻转 </menuitem> | 
<menuitem icon="images/icon3.png" onclick="imageRotation(flip-vertical')"> 垂 直 翻 转 </menuitem> | 
</menu> 
</menu> | 
在 上 面 示例 中 定义 了 4 个 类 样式 ， 分 别 设计 将 图 像 旋 转 指定 度数 。 例 如 ， 旋 转 90 度 的 类 样式 
如 此 各 ! 


Totate-90 { transform: rotate(90deg):} 

为 了 使 用 这 个 样式 ， 需 要 写 一 个 函数 将 它 应 用 到 图 像 。 

function imageRotation(name) { 
document.getElementById(image).className = name: 





} 
把 这 个 函数 和 每 一 个 menuitem 的 onclick 事件 处 理 函 数 捆绑 在 一 起 ， 并 且 传 递 一 个 参数 : 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
‘rotate-90'。 | 
| 
| 
| 


<menuitem icon="images/icon1.png" onclick="imageRotation(rotate-90)" > 旋转 90 度 </menuitem> 


完成 这 个 之 后 ， 再 创建 将 图 片 旋转 180 度 和 翻转 图 片 的 样式 ， 将 每 一 个 函数 添加 到 独立 的 
menuitem 中 ， 必 须要 传递 参数 。 最 后 ， 在 Firefox 浏览 器 中 预览 ， 显 示 效 果 如 图 5.19 所 示 。 | 





图 5.19 为 图 片 添加 快捷 旋转 功能 
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5.3.2 ”设计 快捷 分 享 命令 


得 频 诉 扣 | 本 节 示 例 设计 一 个 更 实用 的 分 享 功 能 ， 设 计 效果 如 图 5.20 所 示 。 右 击 页 面 中 的 文本 ， 在 弹出 的 
全 办 | 快捷 菜单 中 选择 “下 载 文件 ”命令 ， 可 以 下 载 本 词 相 关 作者 画像 ， 选择 “查看 源 文件 ”命令 ， 可 以 在 
一 一 新 窗口 中 直接 浏览 作者 画像 : 选择 “分 享 | 反馈 ”命令 ， 可 以 询问 是 否 向 指定 网 址 反馈 信息 ; 选择 “分 

pte 享 [Email” 命 令 ， 可 以 在 地 址 栏 中 发 送信 息 ， 也 可 以 向 指定 邮箱 发 送信 息 。 











下 载 文 件 分 享 信息 
图 5.20 定义 快捷 菜单 
本 例 主要 代码 如 下 所 示 : 
<script> 
var post={ 


"source" : "images/liuyong.rar", 
"demo" : "images/liuyong.jpe", 
"feed" : "http://www.weibo.com/" 


function downloadSourceO { 
window.open(post.source. ' self): 


varurl = document.URL: 
Var body = ' 分 享 地 址 : "+url+"; 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| 于 
| 

| 

| 

| 

| 

| window.location.href = "mailto:?subject="+ document.title +'&body="+ body + 
| 


</script> 
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<p> 寒 蝉 凄 切 ， 对 长 亭 晚 ， 又 雨 初 歇 。 都 门 帐 饮 无 绪 ， 留 恋 处 ， 兰 舟 催 发 。 执 手相 看 泪眼 ， 竟 无 语 凝 嘻 。 ， 
念 去 去 ， 千 里 烟波 ， 暮 需 沉 沉 楚 天 阔 。 多 情 自古 伤 离别 ， 更 那 堪 ， 冷 落 清秋 节 。 今 宵 酒 醒 何 处 ?杨柳 岸 ， 晓 风 
残月 。 此 去 经 年 ， 应 是 良辰 好 景 虚设 。 便 纵 有 千 种 风情 ， 更 与 何人 说 ? </p> 
</section> 
<menu id="download" type="context"> 
<menuitem onclick="downloadSource0" icon="images/icon1.png"> 下 载 文 件 </menuitem> 一 
<menuitem onclick="viewDemo0" icon="images/icon2.png"> 查 看 源 文件 <menuitem> | 
<menu label=" 我 要 分 享 ..…"> 
<menuitem onclick="getFeed0" icon="images/icon3.png"> 反 馈 </menuitem> 
<menuitem onclick="sendEmail()" icon="images/icon4.pnge">Email</menuitem> 








</menu> 


5.3.3 ”设计 任务 列表 命令 


本 节 示例 设计 一 个 动态 添加 列表 项 目的 功能 ， 设 计 效 果 如 图 5.21 所 示 。 右 击 项 目 列表 文本 ， 在 
弹出 的 快捷 菜单 中 选择 “添加 新 任务 ”命令 ， 可 以 快速 为 当前 列表 添加 新 的 列表 项 目 。 








图 5.21 添加 新 的 列表 项 目 


本 例 主要 代码 如 下 所 示 : 
<script> | 
function addNewTaskO { | 
var list = document.createElement('li): | 
list.className = 'task-item'; 
listinnerHTML = "<input type="checkbox" name="" value="done"> 新 任务 ': 
Var taskList = document.getElementById('task’):; 


taskList.appendChild(list): | 
} | 
</script> | 
<section id="on-web-app" contextmenu="add task"> | 

<header> 

<h3> 任 务 列表 </h3> 
</header> 
<ul id="task"> 


<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 一 </li> 
<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 二 </li> 
<li class="task-item"><input type="checkbox" name="" value="done"> 任 务 三 </li> 
</ul> 
</section> 
<menu id="add task" type="context"> 


。93 。 


后 及 A 从 入 门 到 精通 ( 微 课 精 编 版 ) 


<menuitem onclick="addNewTaskO" icon="images/add png"> 添 加 新 任务 </menuitem> 
| </menu> 
a 5.3.4 设计 排行 榜 列表 结构 


音乐 排行 榜 ， 主 要 体现 的 是 当前 某 个 时 间 段 中 某 些 歌 曲 的 排名 情况 。 如 图 5.22 所 示 为 本 节 示 例 
的 效果 图 ， 该 例 展示 音乐 排行 榜 在 网 页 中 的 基本 设计 样式 。 





图 5.22 音乐 排行 榜 栏 目 


【操作 步骤 】 
第 1 步 ， 新 建 网 页 ， 保 存 为 mndex.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 HTML 文档 。 
<div class="music sort"> 
<h1> 音 乐 排行 榜 </h1> 
<div class="content"> 


<li><strong> 浪 人 情歌 </strong> <span> 伍 佰 </span></li> 
<li><strong>K 歌 之 王 </strong> <span> 陈 奕 迅 </span></li> 
<li><strong> 心 如 刀 割 </strong> <span> 张 学 友 </span></li> 
<li><strong> 零 (战神 主题 曲 ) </strong> <span> 柯 有 伦 </span></li> 
<li><strong> 双 子 星 </strong> <span> 光 良 </span></li> 
<li><strong> 离 歌 </strong> <span> 信 乐团 </span></li> 
<li><strong> 海 阔 天 空 </strong> <span> 信 乐团 </span></li> 
<li><strong> 天 高 地 厚 </strong> <span> 信 乐团 </span></li> 
<li><strong> 边 走边 爱 </strong> <span> 谢 霆 锋 </span></li> 
<li><strong> 想 到 和 做 到 的 </strong> <span> 马 天 宇 </span></li> 

















</ol> 
| </div> 
| </div> 
| 第 2 步 ， 厘 清 设计 电路。 首先， 将 轩 
| 认 的 显示 效果 与 通过 CSS 样式 修饰 过 的 显 op 
| 示 效 果 进行 对 比 ， 如 图 5.23 所 示 ， 可 以 发 音乐 排行 榜 
| 现 两 者 不 同 之 处 。 人 二 
| 回 “文字 的 大 小 。 eh 人 
| 榜 单 排名 序号 的 样式 。 下 i 
| 回 ”背景 色 和 边框 色 的 修饰 。 本 jg 的 1 各 省 汪 = 
| 
| 





图 5.23 CSS 样式 修饰 后 〈 左 ) 与 无 CSS 样式 修饰 ( 右 ) 
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Ss 
通过 对 比 可 见 ， 数 字 序号 已 经 不 再 是 普通 的 常见 文字 了 ， 而 是 经 过 特殊 处 理 的 文字 效果 ， a | 
就 是 这 个 数字 必须 使 用 图 片 才 可 以 达到 预期 效果 . 这 个 数字 图 片 在 列表 中 处 理 方式 也 就 是 本 例 中 需 要 | 
讲解 的 部 分 ， 在 讲解 之 前 先 思考 下 面 两 个 问题 : 
10 个 数字 ， 也 就 是 10 张 图 片 ， 可 不 可 以 将 这 10 张 图 片 合并 成 一 张 图 片 ; 
回 将 10 张 图 片 合并 成 一 张 图 片 ， 但 HTML 结构 中 又 没有 针对 每 个 列表 <li> 标 签 添加 Class 类 | 
名 ， 怎 么 将 图 片 指定 到 相对 应 的 排名 中 。 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 | 
第 4 步 ， 针 对 第 2 步 分析 的 两 个 主要 问题 ， 编 写 如 下 CSS 样式 : | 
music sort { 
width:200px: 
border: 1px solid #E8E8E8:} 
-music_sort * {/* 清除 .music_sort 容器 中 所 有 元 素 的 空格 ， 并 设置 文字 相关 属性 */ 
Imargin:0: padding:0; 
font:normal 12px/22px "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif:} 
.music sorthl { 
height:24px: 
text-indent:10px; /* 标题 文字 缩 进 ， 增 加 空间 感 */ | 
font-weight:bold; | 
Color:#FFFFFF: background-color:#999999:} | 
music sort ol { | 
height:220px; /* 固定 榜 单列 表 的 整体 高 度 */ 
padding-left:26px; /* 利用 内 补丁 增加 ol 容器 的 空间 显示 背景 图 片 */ 
list-style:none; /* 去 除 默认 的 列表 修饰 符 */ | 
background:url(images/number.gif) no-repeat 0 0:} | 
music sortli{ | 
width: 100%; height:22px; 
list-style:none; /* 去 除 默认 的 列表 修饰 符 */} 
music sort li span {color:#CCCCCC:; /* 将 列表 中 的 歌手 名 字 设置 为 灰色 */} 
这 段 CSS 样式 就 是 为 了 实现 最 终 效果 而 写 的 ， 代 码 设计 思路 如 下 : 
将 有 序列 表 <ol> 标 签 的 高 度 属性 值 设 定 一 个 固定 值 ， 这 个 固定 值 为 列表 <l> 标 签 的 10 售 , 并 | 
将 列表 所 有 的 默认 样式 修饰 符 取 消 ; 利用 有 序列 表 <ol> 标 签 中 增加 左 补 丁 的 空间 显示 合并 后 的 数 
字 背 景 图 。 | 
简单 的 方法 代 蔡 了 给 不 同 的 列表 <li> 标 签 添加 不 同 背景 图 片 的 麻烦 步 又 。 但 这 种 处 理 方式 的 缺陷 | 
就 是 必须 调整 好 背景 图 片 中 10 个 数字 图 片 的 间距 ， 而 且 如 果 增加 了 每 个 列表 <I> 标 签 的 高 度 ， 那 么 | 
就 需要 重新 修改 背景 图 片 中 10 个 数字 图 片 的 间距 。 
第 5 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 5.22 所 示 (index.html)。 


5.3.5 ”设计 图 文 列表 栏目 


图 文 列 表 的 结构 就 是 将 列表 内 容 以 图 片 的 形式 在 页 面 中 显示 , 简单 理解 就 是 图 片 列表 信息 附带 简 | 视频 讲解 
短 的 文字 说 明 。 在 图 中 展示 的 内 容 主要 包含 列表 标题 、 图 片 和 图 片 相关 说 明 的 文字 。 下 面 结合 示例 进 | 
行 说 明 。 

【操作 步骤 】 

第 1 步 ， 新 建 网 页 ， 保 存 为 ndex.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 HTML 文档 。 
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<div class="pic list"> 


| 
| <h3> 爱 秀 </h3> 
| <div class="content"> 
P| > 

全 站 | <li><a hre 全 "#f"><img src="images/1.jpg" alt=" 美 女 个 性 搞怪 自拍 "> 美女 个 性 搞怪 自拍 </a></i> 

S| <li><a hre 人 ="#"><img src="images/2jpg”alt=" 绝 对 阳光 的 清纯 小 妹 "> 绝对 阳光 的 清纯 小 妹 
| ><a hre 仁 "#'><img src="images/3.jpg”alt=" 漂 亮 美女 的 可 爱 外 拍 "> 漂亮 美女 的 可 爱 外 拍 
<a></> 


-<li><a href="W"><img sre="images/4.jpg" alt=" 可 爱 美 女 的 艺术 照 "> 可 爱 美 女 的 艺术 照 <la></li> 
<li><a href="#"><img src="images/5jpgr alt=" 漂 亮 美女 妖 美 自拍 "> 漂亮 美女 妖 美 自拍 </a></li> 
<li><a href="#'><img src="images/8jpg”alt=" 清 纯 迷 人 的 黄 毛 站 头 > 清 纯 迷人 的 黄 毛 了 头 


| 第 2 步 ， 梳 理 结构 。 对 于 列表 的 内 容 不 再 细 解 ， 细 心 的 用 户 应 该 发 现 ; 这 个 列表 的 HTML 结构 
| 如 图 5.24 所 示 ， 结 构 层次 清晰 而 富有 条 理 。 


列表 整体 容器 
<div class="list_box">....</div> 
列表 内 容 容器 
<div class="content">....</div> 
列表 区 域 
<u> 








<li>....</li> 


< 
图 5.24 ”列表 结构 的 分 析 示 意图 

该 结构 不 仅 在 HTML 代码 中 能 很 好 体现 页 面 结构 层次 ， 而 且 更 方便 后 期 使 用 CSS 设计 。 

| 第 3 步 ， 梳 理 设计 思路 。 图 文 列表 的 排列 方式 最 讲究 的 是 : 宽度 属性 的 计算 。 横 向 排列 的 列表 ， 

| 当 整 体 的 列表 〈 有 序列 表 或 者 无 序列 表 ) 横向 空间 不 足以 将 所 有 列表 横向 显示 时 ， 浏 览 器 会 将 列表 换 

| 行 显示 。 这 样 的 情况 只 有 在 宽度 计算 正确 时 ， 才 足够 将 所 有 列表 横向 排列 显示 并 且 不 会 产生 空间 的 浪 


| 费 ， 如 图 5.25 所 示 。 
忌 引 人 宇和 











| 

| 

| 宽度 计算 不 正确 导致 空 
| 因为 列表 空间 不 够 导致 其 自动 换行 间 的 浪费 

| 

















图 5.25 列表 宽度 计算 不 正确 导致 的 结果 
| 这 种 情况 是 必须 要 避免 的 ， 因 此 准确 计算 列表 内 容 区 域 所 需要 的 空间 是 有 必要 的 。 
| 第 4 步 ， 设 计 栏目 宽度 。 在 本 例 中 ， 每 张 图 片 的 宽度 为 134px， 左 右 内 补丁 分 别 为 3px， 左 右边 
| 框 分 别 为 1px 宽度 的 线条 ， 且 图 片 列表 与 图 片 列表 的 间距 为 15px( 即 右 外 补丁 为 13px)， 根 据 盒 模型 
| 的 计算 方式 ， 最 终 列表 <1Hi> 标 签 的 盒 模型 宽度 值 为 1px+3px+134px+3px+1px+15px=157px， 因 此 图 文 
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列表 区 域 总 宽度 值 为 137pxX 6=942px。 
第 5 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
第 6 步 ， 编 写 图 文 列表 区 域 的 相关 CSS 样式 代码 : 











Pic list .content { 4 
width:942px: | 
height:150px; Note 
overflow:hidden; /* 设置 图 文 列表 内 容 区 域 的 宽度 和 高 度 ， 超 过 部 分 隐藏 */ ote 
padding:22px 0 0 15px: /* 利用 内 补丁 增加 列表 内 容 区 域 与 其 他 元 素 的 间距 */ | 





} 
Pic list .content i { | 
float:left: 
width:142px: 


margin-right:15px; /* 列表 <li> 标 签 设置 浮动 后 ， 所 有 列表 将 根据 盒 模型 的 计算 方式 计算 列表 宽度 ， 并 | 
且 并 排 显示 */ 
display:inline; /* 设置 浮动 后 并 且 增 加 了 左右 外 补丁 ，IE6 会 产生 双 倍 间距 的 bug， 利 用 该 属性 解决 */} | 


.pic_list .content 作为 图 文 列表 内 容 区 域 ， 增 加 相应 的 内 补丁 使 其 与 整体 之 间 有 空间 感 ， 这 个 是 视 | | 
觉 效 果 中 必然 会 处 理 的 一 个 问题 。 | 
Pic_list .content li 因为 具有 浮动 属性 ， 并 且 有 左右 外 补丁 中 一 个 外 补丁 属性 ， 在 下 6 浏览 器 中 会 | 
产生 双 倍 间距 的 bug 问题 。 而 神奇 的 是 ， 添 加 display:inline 可 以 解决 该 问题 ， 并 且 不 会 对 其 他 浏览 器 | 
产生 任何 影响 。 
第 7 步 ， 主 要 的 内 容 设置 成 功 之 后 就 可 以 对 图 文 列 表 的 整体 效果 做 CSS 样式 的 修饰 ， 例 如 图 文 
列表 的 背景 和 边框 以 及 图 文 列表 标题 的 高 度 、 文 字样 式 和 背景 等 。 
.pic_list { 
width:960px: /* 设置 图 文 列 表 整 体 的 宽度 */ 
border:1px solid #D9E5F5; /* 添加 图 文 列表 的 边框 */ 
background:url(images/wrap.jpg) repeat-x 0 0; /* 添加 图 文 列表 整体 的 背景 图 片 */ 


} 
.pic_list * {/* 重 置 图 文 列表 内 部 所 有 基本 样式 */ 
margin:0; 
Padding:0; 
list-style:none:; 
font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif: 


.pic_list h3 {/* 设置 图 文 列表 的 标题 的 高 度 、 行 高 、 文 字样 式 和 背景 图 片 */ 
height:34px: 
line-height:34px: 
font-size: 14px: 
text-indent:12px: 
font-weight:bold:; | 
color:#223A6D: | 
background:url(images/h3bg jpg) no-repeat 0 0: | 
第 8 步 ， 调 整 图 文 列表 信息 细节 以 及 用 户 体验 的 把 握 ， 例 如 图 片 的 边框 、 背 景 和 文字 的 颜色 等 ，， 
并 且 还 要 考虑 当 用 户 在 鼠标 经 过 图 片 时 ， 为 了 能 更 好 地 体现 视觉 效果 ， 给 用 户 一 个 全 新 的 体验 , 添加 | 
当 鼠 标 经 过 图 片 列 表 信 息 时 图 片 以 及 文字 的 样式 变化 。 | 


| 
| 
L 
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| pic list .content lia { 
| display:block: /* 将 内 联 元 素 a 元 素 转换 为 块 元 素 使 其 具备 宽 高 属性 */ 
| width:142px:; /* 设置 转换 为 块 元 素 后 的 a 元素 的 宽度 */ 
| text-aligncenter; /e 文本 居中 显示 4 
仿 F | text-decoration:none; /* 文本 下 划 线 */ 
Peg color:#333333:; /* 文本 的 颜色 */ 


} 
.Pic list .content li a img { 
| display:block: /* 当 图 片 设 置 为 块 元 素 时 ， 可 以 解决 IE6 中 图 片 底部 几 个 空白 像素 的 bug */ 
width:134px: 
height:101px: 
padding:3px; /* 设置 图 片 的 宽 高 属性 以 及 内 补丁 属性 */ 
margin-bottom:8px; /* 将 图 片 的 底部 外 补丁 设置 8px， 使 其 与 文字 之 间 产 生 一 定 间距 */ 


border: 1px solid #CCCCCC: 
background-color:#EFFFFF; /* 背景 颜色 将 通过 内 补丁 的 空间 显示 */ 
| } 
| .Pic list .content li a:hover { 
| text-decoration:underline; 
| color#CC0000: /* 当 鼠 标 经 过 图 文 列表 时 ， 文 字 有 下 划 线 并 且 改 变 颜 色 */ 
| } 
| 


.pic list .content li a:hover img { 
background-color:#22407E; /* 当 鼠 标 经 过 图 文 列表 时 ， 图 片 的 背景 颜色 改变 */ 
} 


第 9 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 5.26 所 示 。 





| 图 5.26 ”图 文 信息 列表 页 面 效 果 
| 
| 
54 在 线 练 习 


使 用 CSS3 设计 各 种 超 链 接 样式 ， 强 化 基本 功 训练 。 
毅 3 回 
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设计 表格 


在 网 页 设计 中 ， 表 格 的 主要 功能 是 显示 二 维 数 据 ， 即 包含 行 、 列 结构 的 数据 ， 表 格 结构 将 
别 适合 显示 大 容量 的 记录 ， 也 可 以 辅助 网 页 布局 。 本 章 详 细 介 绍 表格 在 网 页 设计 中 的 应 用 ， 包 


括 设计 符合 标准 化 的 表格 结构 ， 能 够 正确 设置 表格 属性 


【 学 习 要 点 】 

WI 正确 使 用 表格 标签 
WI 设置 表格 属性 

WI 设置 单元 格 属性 


A 


6.1 认识 表格 结构 
表格 由 行 、 列 、 单 元 格 3 部 分 组 成 。 单 元 格 是 行 与 列 交叉 的 部 分 ， 它 组 成 表格 的 最 小 单位 ， 数 据 
和 3 入 fs 是 在 单元 格 中 进行 的 。 单 元 格 可 以 拆 分 ， 也 可 以 合并 。 以 Exeel 为 例 ， 用 户 可 以 很 清 
| 晰 地 了 解 表格 的 各 个 组 成 部 分 ， 如 图 6.1 所 示 。 











皇 B [一 

! 

1 人 5 的 9 元 格 。 咱 2.----------- 一 -- HR 和 -1 
! 


| 1 

| 2 

| 3 全 并 后 的 单元 格 3 合并 后 的 单元 格 
| ES 到 

| EE ] 

| 

| 


6.1 表格 结构 分 析 


| 在 HTML 中 , 表格 由 <table> 标 签 来 定义 ， 每 个 表格 均 有 若干 行 ， 行 由 <tr> 标 签 定义 ， 每 行 被 分 割 
| 为 若干 单元 格 ， 单 元 格 由 <td> 标 签 定义 。 字 母 td 表示 表格 数据 (table data)， 即 数据 单元 格 的 内 容 ， 
| 数据 单元 格 可 以 包含 文本 、 图 片 、 列 表 、 段 落 、 表 单 、 水 平 线 、 表 格 等 。 
设计 符合 标准 的 表格 结构 ， 用 户 应 该 注意 每 个 标签 的 语义 性 和 使 用 规则 ， 简 单 说 明 如 下 所 示 。 
<table>: 定义 表格 。 在 <table> 标 签 内 部 可 以 放置 表格 的 标题 、 表 格 行 、 表 格 列 、 表 格 单元 
以 及 其 他 表格 对 象 。 
<caption>: 定义 表格 标题 。<caption> 标 签 必 须 紧 随 <table> 标 签 之 后 。 只 能 为 每 个 表格 定义 
一 个 标题 。 通 常 这 个 标题 会 被 居中 显示 在 表格 之 上 。 
<th>: 定义 表 头 单元 格 。<th> 标 签 内 部 的 文本 通常 会 呈现 为 粗 体 、 居 中 显示 。 
<tr>: 在 表格 中 定义 一 行 。 
<td>: 在 表格 中 定义 一 个 单元 格 。 
<thead>: 定义 表 头 结构 。 
<tbody>: 定义 表格 主体 结构 。 
<tfoot>: 定义 表格 的 页 脚 结构 。 
<col>: 在 表格 中 定义 针对 一 个 或 多 个 列 的 属性 值 。 只 能 在 <table> 或 <colgroup> 标 签 中 使 用 。 
<colgroup>: 定义 表格 列 的 分 组 。 通 过 该 标签 ， 可 以 对 列 组 进行 格式 化 。 只 能 在 <table> 标 签 
中 使 用 。 

【示例 】 下 面 示例 使 用 上 述 表 格 标签 对 象 ， 设 计 一 个 符合 标准 的 表格 结构 ， 代 码 如 下 所 示 。 
| table> 
| <caption> 符 合 标准 的 表格 结构 </caption> 
下 


加 


回回 罗 回回 图 罗 罗 
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</tr> 
</table> | 
在 符合 标准 的 表格 结构 中 很 少见 到 各 种 表格 属性 ， 代 码 简洁 ， 数 据 明 了 ， 表 格 功能 单一 。 
僵 
6 面相 才 类 





表格 有 多 种 形式 ， 如 简单 的 表格 、 带 标题 的 表格 、 结 构 化 的 表格 、 列 分 组 的 表格 等 ， 本 节 将 介绍 
这 些 不 同形 式 的 表格 的 设计 方法 。 | 


6.2.1 定义 普通 表格 


使 用 table 元 素 可 以 定义 HTML 表格 。 简 单 的 HTML 表格 由 一 个 table 元 素 ， 以 及 一 fg | 仙 玫 
和 td 元 素 组 成 ， 其 中 t 元素 定义 表格 行 ，td 元 素 定义 表格 的 单元 格 。 | 
【示例 】 下 面 示例 设计 一 个 简单 的 HTML 表格 ， 包 含 两 行 两 列 ， 演 示 效 果 如 图 6.2 所 示 。 


<table> 
<t> 





<td> 月 落 乌 啼 霜 满 天 ，</td> 
<td> 江 枫 渔 火 对 愁 眠 。</td> 
</u> 


| 

| 

| 

| 

<td> 姑 苏 城 外 寒山 寺 ，</td> | 

<td> 夜 半 钟 声 到 客船 。</td> 

</t> | 
</table> 


Coe (+) - http//localho... - BC | & localhost 


月 落 乌 叶 霜 满 天 ， 江 机 渔 炎 对 悉 眼 。 | 
类 芝 城 外 守山 寺 ， 夜半 名 声 到 客船。 





图 62 设计 简单 的 表格 
6.2.2 ”定义 列 标题 


在 数据 表格 中 ， 每 列 可 以 包含 一 个 标题 ， 这 在 数据 库 中 被 称 为 字段 ， 在 HTML 中 被 称 为 表 头 单 
元 格 。 使 用 也 元 素 定义 表 头 单元 格 。 
痊 提示 : HTML 表格 中 有 两 种 类 型 的 单元 格 : 
回 表 头 单元 格 : 包含 表 头 信息 ， 由 也 元 素 创建。 
回 标准 单元 格 : 包含 数据 ， 由 td 元 素 创建 。 
在 默认 状态 下 ， 也 元 素 内 部 的 文本 皇 现 为 居中 、 粗 体 显示 ， 而 世 元 素 骨 是 丰 对 并 的 普 
通 文 本 。 
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| 【示例 1】 下 面 示例 设计 一 个 含有 表 头 信息 的 HTML 表格 ， 包 含 两 行 两 列 ， 演 示 效 果 如 图 6.3 
| 

| 所 示 。 

| <table> 


”Note | 3 
<t> 
<td> 张 三 </td><td>zhangsan@163.com</td> 


</t> 
</table> 


表 头 单元 格 一 般 位 于 表格 的 第 一 行 ， 当然 , 用 户 可 以 根据 需要 把 表 头 单元 格 放 在 表格 中 的 任意 位 
置 。 例 如 ， 第 一 行 或 最 后 一 行 ， 第 一 列 或 最 后 一 列 等 。 也 可 以 定义 多 重 表 头 。 

【示例 2】 下 面 示例 设计 了 一 个 简单 的 课程 表 ， 表 格 中 包含 行 标题 和 列 标题 ， 即 表格 被 定义 了 两 

| 类 表 头 单元 格 ， 演 示 效 果 如 图 6.4 所 示 。 


<table> 
<t> 





| 
| 
| <th>&nbsp;</th> 
| <th> 星 期 一 </th><th> 星 期 二 </th><th> 星 期 三 </ 了 h><th> 星 期 四 </th><th> 星 期 五 <th> 
| </t> 
| <tr> 
| <th> 第 1 节 </th> 
| <td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td><td> 语 文 </td> <td> 美 术 </td> 
| </t> 
| <th> 第 2 节 </th> 
| <td> 数 学 </td><td> 语 文 </td> <td> 体 育 </td> <td> 英 语 </td><td> 音 乐 </td> 
| </tr> 
二 
| <th> 第 3 节 </th> 
| <td> 语 文 </td><td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td> 
| </t> 
| <t> 
| <th> 第 4 节 </th> 
<td> 地 理 </td><td> 化 学 </td> <td> 语 文 </td><td> 语 文 </td><td> 美 术 </td> 
</tr> 


| ele Soahes 
| 星期 一 旺 期 二 星期 三 星期 四 旦 期 五 

| 数学 语文 美术 

| 


理 
电子 邮箱 学 语文 体育 英 话 
= zhongan@163 com 体育 数学 ”其 
学 ”语文 语文 





| 
| 
| 图 6.3 设计 带 有 表 头 的 表格 图 6.4 设计 双 表 头 的 表格 
| 
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6.2.3 ”定义 表格 标题 
有 时 为 了 方便 浏览 ， 用 户 需要 为 表格 添加 一 个 标题 。 使 用 caption 元 素 可 以 定义 表格 标题 。 
< 全 注意 : 须 紧 随 table 元 素 之 后 ， 只 能 对 每 个 表格 定义 一 个 标题 。 


【示例 】 以 上 节 示 例 1 为 基础 ， 下 面 示例 为 上 节 示 例 1 的 表格 添加 一 个 标题 ， 演 示 效 果 如 图 6.5 
所 示 。 | 





<table> | 
<caption> 通 讯 录 </caption> 
<tr> 
<th> 用 户 名 </th> 
<th> 电 子 邮 箱 </th> 
</t> 
<t> 
<td> 张 三 </td> 
<td>zhangsan(@163.com</td> 
</t> 
</table> 


通讯 录 
用 户 名 。 电子 邮箱 


张 三 zhangsan@163.com 


| 
| 
| 
| 
| 
Re 加 -| 大 http://ocalho.. - 2 © | & localhost | 
| 
| 
| 
| 
| 
| 





图 6.5 设计 带 有 标题 的 表格 
从 图 6.5 中 可 以 看 到 ， 在 默认 状态 下 这 个 标题 位 于 表格 上 面 居中 显示 。 


次 提示 : 在 HIML4 中 ,可 以 使 用 align 属性 设置 标题 的 对 齐 方式 , 取 值 包括 left. right top、 bottom。 | 
在 HTMLS5 中 不 建议 使 用 ， 建 议 使 用 CSS 样式 取而代之 。 


6.2.4 ”表格 行 分 组 


thead、tfoot 和 tbody 元 素 可 以 对 表格 中 的 行进 行 分 组 。 当 创建 表格 时 ， 如 果 和 希望 拥有 一 个 标题 
行 ， 一 些 带 有 数据 的 行 ， 以 及 位 于 底部 的 一 个 总 计 行 ， 这 样 可 以 设计 独立 于 表格 标题 和 页 脚 的 表格 正 
文 滚动 。 当 长 的 表格 被 打印 时 ， 表 格 的 表 头 和 页 脚 可 被 打印 在 包含 表格 数据 的 每 张 页 面 上 。 

使 用 thead 元 素 可 以 定义 表格 的 表 头 , 该 标签 用 于 组 合 HTML 表格 的 表 头 内 容 , 一 般 与 tbody 和 
tfoot 元 素 结合 起 来 使 用 。 其 中 tbody 元 素 用 于 对 HTML 表格 中 的 主体 内 容 进 行 分 组 ， 而 tfoot | 
用 于 对 HTML 表格 中 的 表 注 (页 脚 ) 内 容 进 行 分 组 。 | 

【示例 】 下 面 示例 使 用 上 述 各 种 表格 标签 对 象 ， 设 计 一 个 符合 标准 的 表格 结构 ， 代 码 如 下 所 示 。 | 

<style type="text/css"> | 

table { width: 100%: } | 

caption { font-size: 24px: margin: 12px: color blue: } L 








-0 
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也 . td { border: solid 1px blue: padding: 8px: } 
tfoot td { text-align: right: color: red: } 


</style> 
| <table> 
全 7 | <caption> 结 构 化 表格 标签 </caption> 
| <thead> 
<tr><th> 标 签 </ 耻 ><th> 说 明 </th></tr> 
ee 
| <tfoot> 
| <tr><td colspan="2">* 在 表格 中 ， 上 述 标签 属于 可 选 标 签 。</td></tr> 
</tfoot> 


| 

| <tr><td>&lt:thead&zgt:</td> <td> 定 义 表 头 结构 。</td></t> 

| <tr><td>&lttbody&gt</td><td> 定 义 表格 主体 结构 。</td></tr> 

| <tr><td>&lt:tfoot&gt:</td><td> 定 义 表格 的 页 脚 结构 。</td></tr> 
</tbody> 


| 在 上 面 示例 代码 中 ， 可 以 看 到 <tfoot> 是 放 在 <thead> 和 <tbody> 之 间 ， 而 最 终 在 浏览 器 中 会 发 现 
| <tfoot> 中 的 内 容 显 示 在 表格 底部 。 在 <tfoot> 标 签 中 有 一 个 colspan 属性 ， 该 属性 的 主要 功能 是 横向 合 
| 并 单元 格 ， 将 表格 底部 的 两 个 单元 格 合并 为 一 个 单元 格 ， 示 例 效果 如 图 6.6 所 示 。 








“在 表 司 中 ， 上 广 标 答 届 于 可 浊 标 答 





图 6.6 表格 结构 效果 

-全 注意 ; 当 使 用 thead tfoot 和 tbody 元 素 时 ,必须 使 用 全 部 的 元 素 , 排列 次 序 是 thead tfoot tbody， 
| 这 样 浏览 器 就 可 以 在 收 到 所 有 数据 前 呈现 页 脚 ， 且 这 些 元 素 必须 在 table 元 素 内 部 使 用 。 
在 默认 情况 下 ， 这 些 元 素 不 会 影响 到 表格 的 布局 。 不 过 ， 用 户 可 以 使 用 CSS 使 这 些 元 素 
改变 表格 的 外 观 。 在 <thead> 标 签 内 部 必须 包含 <tr> 标 签 。 


6.2.5 ”表格 列 分 组 


| ccol 和 colgroup 元 素 可 以 对 表格 中 的 列 进行 分 组 。 
| 其 中 使 用 <col> 标 签 可 以 为 表格 中 一 个 或 多 个 列 定义 属性 值 。 如 果 需 要 对 全 部 列 应 用 样式 ，<col> 
| 标签 很 有 用 ， 这 样 就 不 需要 对 各 个 单元 格 和 各 行 重复 应 用 样式 了 。 
| 【示例 1】 下 面 示例 使 用 col 元 素 为 表格 中 的 三 列 设置 不 同 的 对 齐 方式 ， 效 果 如 图 6.7 所 示 。 
<table width="100%" border="1"> 
| <col align="left" /> 
| <col align="center" /> 
<col align="right" /> 
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<t><td> 慈 母 手中 线 ，</td><td> 游 子 身 上 衣 。</td><td> 临 行 密 密 缝 ，</td></tr> 
<tP<td> 意 恐 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></t> 





信友 这 


临 行 密 帘 六 
报 得 三 春晖 - 








图 6.7 表格 列 分 组 样式 
在 上 面 示例 中 , 使 用 3 个 eol 元 素 为 表格 中 三 列 分 别 定义 不 同 的 对 齐 方式 。 这 里 使 用 HTML 标签 | 
属性 align 设置 对 齐 方式 ， 取 值 包括 right( 右 对 齐 )、left( 左 对 齐 )、center( 居 中 对 齐 )、justify (两 
端 对 齐 ) 和 char (对 准 指定 字符 )。 由 于 浏览 器 支持 不 统一 ， 不 建议 使 用 align 属性 。 
深 提示 : 只 能 在 table 或 colgroup 元 素 中 使 用 eol 元 素 。col 元素 是 仅 包含 属性 的 空 元 素 ， Fe 
含 任何 信息 ， 如 要 创建 列 ， 就 必须 在 ft 元 素 内 嵌入 td 元 素 . 
使 用 <colgroup> 标 签 也 可 以 对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 wal 
部 列 应 用 样式 , <colgroup> 标 签 很 有 用 ,这 样 就 不 需要 对 各 个 单元 和 各 行 重复 应 用 样式 了 。 


| 
| 
【示例 2】 下 面 示例 使 用 colgroup 元 素 为 表格 中 每 列 定义 不 同 的 宽度 ， 效 果 如 图 6.8 所 示 。 | 
<style type="text/css"> | 
| 
| 
| 
| 
| 


.COll { width:25%; color:red: font-size:16px: } 
.col2 { width:50%:; color:blue: } 
</style> 
<table width="100%" border="1"> 
<colgroup span="2" class="coll"></colgroup> 
<colgroup class="col2"></colgroup> 
<t><td> 慈 母 手中 线 ，</td><td> 游 子 身上 衣 。</td><td> 临 行 密 密 颖 ，</td></tr> 
<tP<td> 意 恐 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></tr> | 
</table> | 
| 


D localhost/ess2 heml x 


CC | © locahostest2himl 

















尖子 身上 太 . 性 行 宝宝 弘 ， 
[ED 1 认 三 寸 章 心 。 眼 得 三 夺 晖 。 



































6.8 定义 表格 列 分 组 样式 


<colgroup> 标 签 只 能 在 table 元 素 中 使 用 。 
为 列 分 组 定义 样式 时 ， 建 议 为 <colgroup> 或 <col> 标 签 添加 class 属性 ， 然 后 使 用 CSS 类 样式 定 
义 列 的 对 齐 方式 、 宽 度 和 背景 色 等 样式 。 | 
【示例 3】 从 上 面 两 个 示例 可 以 看 到 ，<colgroup> 和 <col> 标 签 具有 相同 的 功能 ， ed 
<col> 标 签 嵌入 到 <colgroup> 标 签 中 使 用 。 
<table width="100%" border="1"> 


<colgroup> 
<col span="2" class="coll" /> 
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<col class= "col2" /> 


</colgroup> 
<tr><td> 慈 母 手 中 线 ，</td><td> 游 子 身上 衣 。</td><td> 临 行 密 密 缝 ，</td></tr> 
<tr><td> 意 恐 迟 迟 归 。</td><td> 谁 言 寸 草 心 ，</td><td> 报 得 三 春晖 。</td></t> 


会 扩 | | </table> 


| 如 果 没 有 对 应 的 col 元 素 ， 列 会 从 colgroup 元 素 那 里 继承 所 有 的 属性 值 。 


| 安 提示 : span 是 <colgroup> 和 <col> 标 签 专用 属性 ， 规 定 列 组 应 该 横 跨 的 列 数 ， 取 值 为 正 整 数 。 例 
如 ， 在 一 个 包含 6 列 的 表格 中 ,第 一 组 有 4 列 ， 第 二 组 有 2 列 ， 这 样 的 表格 在 列 上 进行 分 
组 ， 如 下 所 示 : 


<colgroup Span="4"></colgroup> 
<colgroup span="2"></colgroup> 


浏览 器 将 表格 的 单元 格 合成 列 时 , 会 将 每 行 前 四 个 单元 格 合 成 第 一 个 列 组 , 将 接 下 来 的 两 个 单元 
| 格 合成 第 二 个 列 组 。 这 样 ，<colgroup> 标 签 的 其 他 属性 就 可 以 用 于 该 列 组 包含 的 列 中 了 
如 果 没 有 设置 span 属性 ， 则 每 个 <colgroup> 或 <col> 标 签 代表 一 列 ， 按 顺序 排列 。 


| 国 注意 : 现代 浏览 器 都 支持 <colgroup> 和 <col> 标 签 ， 但 是 Firefox、Chrome 和 Safari 浏览 器 仅 支持 
col 和 colgroup 元 素 的 span 和 width 属性 。 也 就 是 说 ， 用 户 只 能 够 通过 列 分 组 为 表格 的 列 
定义 统一 的 宽度 ， 另 外 也 可 以 定义 背景 色 ， 但 是 其 他 CSS 样式 不 支持 。 虽然 下 支持 ,但 

| 是 不 建议 用 户 去 应 用 。 通过 示例 2， 用 户 也 能 够 看 到 CSS 类 样式 中 的 “color:red;” 和 

| “font-size:16px;” 都 没有 发 挥 作用 。 

| 【示例 4】 下面 示 例 定义 如 下 几 个 类 样式 , 然后 分 别 应 用 到 <col> 列 标签 中 , 显示 效果 如 图 6.9 所 示 。 


<style type="text/css"> 
table { /* 表格 默认 样式 */ 
| border:solid 1px #99CCFF: 
| border-collapse:collapse:} 
| .bg 也 { /* 标题 行 类 样式 */ 
background:#0000FF: 
color:#EEE } 
.bg_evenl{/# 列 1 类 样式 */ 
background:#CCCCFF:} 
-bg_even2{/# 列 2 类 样式 */ 
background:#FFFFCC:} 
</style> 
<table> 
<caption>IE 浏览 器 发 展 大 事 记 </caption> 
<colgroup> 
<col class="bg_evenl" id="verson" /> 
<col class="bg even2" id="postTime" /> 
<col class="bg evenl" id="OS"/> 
</colgroup> 
<tr class="bg th"> 
<th> 版 本 </th><th> 发 布 时 间 </th><th> 绑 定 系 统 </th> 
</tr> 
<tr> 
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| 

<td>Intemet Explorer 1</td><td>1995 年 8 月 </td><td>Windows 95 Plus! Pack</td> | 
a | 
Cr | 
| 

| 


</table> 





niet Exglorer 10 2013 和 1 月 Windows 8 





图 69 设计 隔 列 变色 的 样式 效果 
6.3 设置 <table> 属 性 


表格 标签 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 使 用 ， 也 有 几 个 专用 属性 无 
法 使 用 CSS 实现 。HTMLS5 支持 的 <table> 标 签 属性 说 明 如 表 6.1 所 示 。 | 


| 
| 
表 6.1 HTML5 支持 的 <table> 标 签 属性 | 
| 


属 性 说 了 明 

定义 表格 边框 ， 值 为 整数 ， 单 位 为 像素 。 当 值 为 0 时 ， 表 示 好 隐藏 表格 边框 线 。 功 能 类 似 CSS 

中 的 border 属性 ， 但 是 没有 CSS 提供 的 边框 属性 强大 | 
cellpadding | 定义 数据 表单 元 格 的 补 白 。 功 能 类 似 CSS 中 的 padding 属性 ， 但 是 功能 比较 弱 | 
cellspacing | 定义 数据 表单 元 格 的 边界 。 功 能 类 似 CSS 中 的 margin 属性 ， 但 是 功能 比较 弱 | 
width 定义 数据 表 的 宽度 。 功 能 类 似 CSS 中 的 width 属性 | 

设置 数据 表 的 外 边框 线 显 示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 。 

取 值 包括 : void (不 显示 任 一 边框 线 ) 、above (顶端 边框 线 ) 、below (底部 边框 线 ) 、hsides 

(顶部 和 底部 边框 线 ) 、lhs〈 左 边框 线 ) 、rhs (右边 框 线 ) 、vsides (左边 和 右边 的 框 线 〉、 

box (所 有 四 周 的 边框 线 )、border (所 有 四 周 的 边框 线 ) 


border | 
| 
| 
| 
| 
| 
| 
| 
设置 数据 表 的 内 边线 显示 ， 实 际 上 它 是 对 border 属性 的 功能 扩展 。 | 
| 
| 
| 
| 


frame 





mles 取 值 包括 : none (禁止 显 示 内 边线 ) 、groups〔 仅 显示 分 组 内 边线 ) 、rows (显示 每 行 的 水 平 
线 ) 、cols (显示 每 列 的 垂直 线 ) 、all (显示 所 有 行 和 列 的 内 边线 ) 


summary 定义 表格 的 摘要 ， 没 有 CSS 对 应 属性 











6.3.1 定义 单线 表格 


rules 和 fiame 是 两 个 特殊 的 表格 样式 属性 ,用 于 定义 表格 的 各 个 内 、 外 边框 线 是 否 显示 。 由 于 使 | 
用 Css 的 border 属性 可 以 实现 相同 的 效果 ， 所 以 不 建议 用 户 选用 。 这 两 个 属性 的 取 值 可 以 参考 表 6.1 | 
的 说 明 。 L 
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2 
【示例 】 在 下 面 示例 中 ， 借 助 表格 标签 的 fame 和 rules 属性 定义 表格 以 单行 线 的 形式 进行 显示 。 
<table border="1" frame="hsides" rules="rows" width="100%"> 


<caption>frame 属性 取 值 说 明 </caption> 
pp <tr>< 了 h> 值 <th><th> 说 明 </ 了 h></tr> 
全 -| | <t<td>voidchtd><td> 不 显示 外 便 边 框 。<ftd><htr> 
Jote | <tr><td>below</td><td> 显 示 下 部 的 外 侧 边框 。<htd> </> 


| <tr><td>hsides</td><td> 显 示 上 部 和 下 部 的 外 侧 边框 。</td></t> 
| <tr><td>vsides</td><td> 显 示 左 边 和 右边 的 外 侧 边框 。</td></t> 

| <tr><td>lhs</td><td> 显 示 左 边 的 外 侧 边框 。</td></tr> 

| <tr><td>rhs</td><td> 显 示 右边 的 外 侧 边 框 。</td></tr> 

| <tr><td>box</td> <td> 在 所 有 四 个 边 上 显示 外 侧 边框 。</td></tr> 

| <tr><td>border</td><td> 在 所 有 四 个 边 上 显示 外 侧 边 框 。</td></tr> 
| </table> 


| 上 面 示例 通过 frame 属性 定义 表格 仅 显 示 上 下 框 线 , 使 用 rules 属性 定义 表格 仅 显示 水 平 内 边线 ， 
| 从 而 设计 出 单行 线 数据 表格 效果 。 在 使 用 frame 和 rules 属性 时 ， 同 时 定义 border 属性 ， 指 定数 据 表 
| 显示 边框 线 。 在 浏览 器 中 预览 ， 则 显示 效果 如 图 6.10 所 示 。 

| 


localhosthesti himl x 


GC © localhost/testl.ntm 


全 sne 属 性 到 值 说 明 
说 明 





图 6.10 定义 单线 表格 样式 
6.3.2 ”定义 分 离 单元 格 


| cellpadding 属性 用 于 定义 单元 格 边沿 与 其 内 容 之 间 的 空白 , cellspacing 属性 定义 单元 格 之 间 的 空 
| 间 。 这 两 个 属性 的 取 值 单位 为 像素 或 者 百分比 。 
| 【示例 】 下 面 示例 设计 井 字形 状 的 表格 。 


<table border="1" frame="void" cellpadding="6" cellspacing="16"> 
<caption>rules 属性 取 值 说 明 </caption> 
<tr><th> 值 </ 了 h><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></tr> 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 

</table> 


| 
| 上 面 示例 通过 frame 属性 隐藏 表格 外 框 , 然后 使 用 cellpadding 属性 定义 单元 格 内 容 的 边 距 为 6 像 
| 素 ， 单 元 格 之 间 的 距离 为 16 像素， 则 在 浏览 器 中 预览 效果 如 图 6.11 所 示 。 
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D ocelot he x Wl 
CC | @ localhost/test] html 日 | 

一 | 

ulcs 属 性 取信 说 本 | 

说 明 | 


Ta | A 
= | [全 于 和 组 和 列 各 之 同 的 如 条 | Note 


位 于 行 之 间 的 线 蒜 。 | | 
位 于 下 之 间 的 线 末 。 | 





从 于 行 和 列 之 辣 的 线 东 。 。 | 





图 6.11 定义 分 离 单 元 格 样式 
深 提示 : cellpadding 属性 定义 的 效果 ， 可 以 使 用 CSS 的 padding 样式 属性 代替 ， 建 议 不 要 直接 使 用 
cellpadding 属性 。 


6.3.3 ”定义 细 线 边框 





藏 边框 线 。 | 
【示例 】 如 果 直 接 为 <table> 标 签 设置 border-"1"， 则 表格 呈现 的 边框 线 效果 如 图 6.12 所 示 。 下 面 | 
示例 配合 使 用 border 和 mles 属性 ， 可 以 设计 细 线 表格 。 
<table border="1" rles="all" width="100%"> 
<caption>mles 属性 取 值 说 明 </caption> 
<tr><th> 值 </ 耻 ><th> 说 明 </th></tr> 
<tr><td>none</td><td> 没 有 线条 。</td></t> 
<tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> | 
<tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></tr> | 
<tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> | 
</table> 


上 面 示例 定义 <table> 标 签 的 border 属性 值 为 1， 同 时 设置 rules 属性 值 为 "all"， 则 显示 效果 如 
图 6.13 所 示 。 


DD localhesVtectihiml x WS D localhocVtectihtml x Ne 


© | © localhost/test1.html 1 © | © localhosttestlhtml 


rules 属 性 取 值 说 明 xrules 属 性 职 秆 说 明 
说 明 [ 说 明 


























后 且 条 。 下 
[位 于 行 组 和 列 组 之 间 的 线条 。 | 位 于 行 组 和 列 组 之 间 的 续 条 。 | 
| 位于 生 之 间 的 厂 革 位 于 行 之 间 的 线条 。 | 
Se 位 于 列 之 间 的 线条 。 | 
| 他 列 之 奖 的 同和 位 于 行 和 列 之 间 的 线条 。 | 
| 位 于 生机 之 同 的 纺 革 ~ 































































































图 6.12 表格 默认 边框 样式 图 6.13 设计 细 线 边框 效果 
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| 6.3.4 ”添加 表格 说 明 


使 用 <table> 标 签 的 summary 属性 可 以 设置 表格 内 容 的 摘要 ， 该 属性 的 值 不 会 显示 ， 但 是 屏幕 阅 
读 器 可 以 利用 该 属性 ， 也 方便 机 器 进行 表格 内 容 检 索 。 
【示例 】 下 面 示例 使 用 summary 属性 为 表格 添加 一 个 简单 的 内 容 说 明 ， 以 方便 搜索 引擎 检索 。 
<table border="1"” rules-="all" width="10096" summary="rules 属性 取 值 说 明 心 
| <tr><th> 值 </th><th> 说 明 </th></tr> 
| <tr><td>none</td><td> 没 有 线条 。</td></t> 
| <tr><td>groups</td><td> 位 于 行 组 和 列 组 之 间 的 线条 。</td></tr> 
<tr><td>rows</td><td> 位 于 行 之 间 的 线条 。</td></tr> 
| <tr><td>cols</td><td> 位 于 列 之 间 的 线条 。</td></t> 
| <tr><td>all</td><td> 位 于 行 和 列 之 间 的 线条 。</td></tr> 
| </table> 





6.4 设置 <td> 和 <th> 属 性 
| 
| 单元 格 标签 (<tdt> 和 <th>) 也 包含 大 量 属性 ， 其 中 大 部 分 属性 都 可 以 使 用 CSS 属性 代替 使 用 ,也 
| 有 几 个 专用 属性 无 法 使 用 CSS 实现 。HTML5 支持 的 <tt> 和 <th> 标 签 属性 说 明 如 表 6.2 所 示 。 
| 表 6.2 HTML5 支持 的 <td> 和 <th> 标 签 属性 
| _ 属 性 说 了 明 
| abbr 定义 单元 格 中 内 容 的 缩写 版 本 
定义 单元 格 内 容 的 水 平 对 齐 方式 。 取 值 包括 : right( 右 对 齐 ) 、left( 左 对 齐 ) 、center (居中 对 

align 齐 ) 、justify (两 端 对 齐 ) 和 char (对 准 指定 字符 ) 。 功 能 类 似 CSS 中 的 text-align 属性 ， 建 议 
| 使 用 CSS 完成 设计 
| axis 对 单元 格 进行 分 类 。 取 值 为 一 个 类 名 
| char 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 
charoff 定义 对 齐 字符 的 偏 移 量 
colspan ”| 定义 单元 格 可 横 跨 的 列 数 
headers ”| 定义 与 单元 格 相关 的 表 头 
rowspan | 定义 单元 格 可 横 跨 的 行 数 
定义 将 表 头 数据 与 单元 格 数据 相关 联 的 方法 。 取 值 包括 : col ( 列 的 表 头 ) 、colgroup 〈 列 组 的 
表 头 ) 、Iow ( 行 的 表 头 ) 、rowgroup 〈 行 组 的 表 头 ) 
valign 定义 单元 格 内 容 的 垂直 排列 方式 。 取 值 包括 : top〈 顶 部 对 齐 ) 、middle (居中 对 齐 ) 、bottom 
(底部 对 齐 ) 、baseline 〈 基 线 对 齐 ) 。 功 能 类 似 CSS 中 的 vertical-align 属性 ， 建 议 使 用 CSS 完 











scope 








| 成 设计 
6.4.1 定义 跨 单元 格 显示 
视频 讲解 | colspan 和 TOWSpan 是 两 个 重要 的 单元 格 属性 ， 分 别 用 来 定义 单元 格 可 跨 列 或 跨行 显示 。 取 值 为 





| 正 整数 ， 如 果 取 值 为 0， 则 表示 浏览 器 横 跨 到 列 组 的 最 后 一 列 ， 或 者 行 组 的 最 后 一 行 。 
| 【示例 】 下 面 示例 使 用 colspan=5 属性 ， 定 义 单元 格 跨 列 显示 ， 效 果 如 图 6.14 所 示 。 
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<table border=1> 


| 
<th align=center colspan=5> 课 程 表 </th> | 
| 


<th> 星 期 一 </th><th> 星 期 二 </th> <th> 星 期 三 </th><th> 星 期 四 </th><th> 星 期 五 </th> 





<td align=center colspan=5> 上 午 </td> | 
<td> 语 文 </td><td> 物 理 </td> <td> 数 学 </td> <td> 语 文 </td><td> 美 术 </td> 


<td> 数 学 </td><td> 语 文 </td><td> 体 育 </td> <td> 英 语 </td><td> 音 乐 <td> 
</a> 
<t> 


<td> 语 文 </td> <td> 体 育 </td><td> 数 学 </td><td> 英 语 </td><td> 地 理 </td> 
</t> 
</t> 


<td align=center colspan=5> 下 午 </td> 


| 
| 
| 
| 
| 
| 
| 
<td> 地 理 </td><td> 化 学 </td><td> 语 文 </td> <td> 语 文 </td><td> 美 术 </td> | 
< | 
| 


<t> 
<td> 作 文 </td><td> 语 文 </td><td> 数 学 </td><td> 体 育 </td><td> 化 学 </td> 


<td> 生 物 </td><td> 语 文 </td><td> 物 理 </td><td> 自 修 </td><td> 自 修 </td> 















































































































































































































































| 
图 6.14 定义 单元 格 跨 列 显示 | 
| 





6.4.2 ”定义 表 头 单元 格 


使 用 scope 属性 ， 可 以 将 单元 格 与 表 头 单元 格 联系 起 来 。 其 中 属性 值 pw， 表示 将 当前 行 的 所 有 1 
单元 格 和 表 头 单元 格 绑 定 起 来 ， 属 性 值 col， 表 示 将 当前 列 的 所 有 单元 格 和 表 头 单元 格 绑 定 起 来 ; 属 | 
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性 值 rowgroup， 表 示 将 单元 格 所 在 的 行 组 (由 <thead>、<tbody> 或 <tfoot> 标签 定义 ) 和 表 头 单元 

格 绑 定 起 来 : 属性 值 colgroup， 表 示 将 单元 格 所 在 的 列 组 〈 由 <col> 或 <colgroup> 标 签 定义 ) 和 表 头 单 

元 格 绑 定 起 来 。 

仿 F | 【示例 】 下 面 示例 将 两 个 也 元素 标识 为 列 的 表 头 ， 将 两 个 td 元 素 标识 为 行 的 表 头 。 
<table border="1"> 


< 
| <th></th> 
<th scope="col"> 月 份 </th> 
<th scope="col"> 金 额 </t 了 h> 
<t> 
<t> 
<td scope="row">1</td> 
<td>9</td> 
<td>$100.00</td> 
</t> 
<t> 
<td scope="row">2</td> 
<td>4/td> 
<td>$10.00</td> 
</t> 
‘</table> 


， 次 提示 : 由 于 不 会 在 普通 浏览 器 中 产生 任何 视觉 效果 ， 很 难 判 断 浏览 器 是 否 支持 seope 属性 。 


6.4.3 为 单元 格 指定 表 头 


使 用 headers 属性 可 以 为 单元 格 指定 表 头 , 该 属性 的 值 是 一 个 表 头 名 称 的 字符 串 , 这 些 名 称 是 用 id 
| 属性 定义 的 不 同 表 头 单元 格 的 名 称 。 

| headers 属性 对 非 可 视 化 的 浏览 器 ， 也 就 是 那些 在 显示 出 相关 数据 单元 格 内 容 之 前 就 显示 表 头 单 
| 元 格 内 容 的 浏览 器 非常 有 用 。 

【示例 】 下 面 示例 分 别 为 表格 中 不 同 的 数据 单元 格 绑 定 表 头 ， 演 示 效 果 如 图 6.15 所 示 。 


<table border="1" width="100%"> 
<t> 
<th id="name"> 姓 名 </th> 
<th id="Email"> 电 子 邮 件 </th> 
<th id="Phone"> 电 话 </th> 
<th id="Address"> 地 址 </th> 
</tr> 
<t> 
<td headers="name"> 张 三 </td> 
<td headers="Email">zhangsan(@163.com</td> 
<td headers="Phone">13522228888</td> 
| <td headers="Address"> 北 京 长 安 街 38 号 </td> 
| </tr> 
| 
| 








</table> 
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图 6.15 为 数据 单元 格 定义 表 头 
6.4.4 ”定义 信息 缩写 


使 用 abbr 属性 可 以 为 单元 格 中 的 内 容 定义 缩写 版 本 。abbr 属性 不 会 在 Web 浏览 器 中 产生 任何 视 | 
觉 效果 方面 的 变化 ， 主 要 为 机 器 检索 服务 。 
【示例 】 下 面 示例 演示 了 如 何在 HTML 中 使 用 abbr 属性 。 


<table border="1"> 
<tr> 
<th> 名 称 </th> 
<th> 说 明 </th> 
<t> 
<t> 
<td abbr="HTML">HyperText Markup Language</td> 
<td> 超 级 文本 标记 语言 </td> 
<> 
<tr> 
<td abbr="CSS">Cascading Style Sheets</td> 
<td> 层 肥 样 式 表 </td> 
</> 
</table> 


6.4.5 ”单元 格 分 类 


使 用 axis 属性 可 以 对 单元 格 进行 分 类 ， 用 于 对 相关 的 信息 列 进行 组 合 。 在 一 个 大 型 数据 表格 中 ， | 
表格 里 通常 保存 有 大 量 数据 ， 通 过 分 类 属性 axis， 浏览 器 可 以 快速 检索 特定 信息 。 | 
axis 属性 的 值 是 引号 包括 的 一 列 类 型 的 名 称 ， 这 些 名 称 可 以 用 来 形成 一 个 查询 。 例 如 ， 如 果 在 一 
个 食物 购物 的 单元 格 中 使 用 axis=meals, 浏览 器 能 够 找到 那些 单元 格 , 获取 它 的 值 , 并 且 计算 出 总 数 。 | 
目前 ， 还 没有 浏览 器 支持 该 属性 。 | 
【示例 】 下 面 示例 使 用 axis 属性 为 表格 中 每 列 数据 进行 分 类 。 
<table border="1" width="100%"> 
<t> 
<th axis="name"> 姓 名 </th> 
<th axis="Email"> 电 子 邮 件 </th> 
<th axis="Phone"> 电 话 </th> 
<th axis="Address"> 地 址 </th> 
</tr> 
<tr> 
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| <td axis="name"> 张 三 </td> 

| <td axis="Email">zhangsan(@163.com</td> 
| <td axis="Phone">13522228888</td> 

<td axis="Address"> 北 京 长 安 街 38 号 </td> 


6.5 案例 实战 


| 本 节 将 通过 拆 解 .分 析 CSS Zen Garden(CSS 禅 意 花园 ) 网 站 的 结构 ,帮助 读者 进一步 实践 HTML5 
| 网 页 设计 的 基本 方法 。 本 例 没 有 涉及 表格 技术 ， 主 要 针对 前 面 几 章 的 基础 知识 做 一 次 阶段 性 集训 。 
| 


6.5.1 网 站 预览 


CSS Zen Garden (http://www.csszengarden.com/) 是 Dave Shea 于 2003 年 创建 的 CSS 标准 推广 小 
站 ， 但 这 个 小 站 却 闻名 全 球 ， 获 得 众多 奖项 。 站 长 Dave Shea 是 一 位 图 像 设计 师 ， 致 力 于 推广 标准 
Web 设计 。 

该 站 被 台湾 设计 师 薛 良 斌 和 李 士 杰 汉 化 为 中 文 繁体 版 之 后 ， 于 是 就 有 人 把 它 称 为 CSS 禅 意 花园 ， 
从 此 禅 意 花 园 就 成 了 CSS Zen Garden 网 站 的 代名词 。CSS 禅 意 花园 早期 设计 效果 如 图 6.16 所 示 。 整 
个 页 面 通过 左上 、 右 下 对 顶 角 定义 背景 图 像 ， 这 些 荷 花 、 梅 花 以 及 汉字 形体 修饰 配合 右上 顶 角 的 宗 
建筑 ， 完 全 把 人 带 入 禅 意 的 后 花园 之 中 。 
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图 6.16 CSS Zen Garden 早期 首页 设计 效果 
新 版 CSS 禅 意 花园 去 除了 中 国 禅 意 元 素 ， 完 全 融入 响应 式 网 页 设计 风格 之 中 ， 界 面 趋 于 简洁 ， 














| 
| 
| 如 图 6.17 所 示 。 
| 
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A demonstration of what can be accomplshed through Css-based design Solect 
MID CENTURY 
MODERN 


Downioad he example 国 HTML PILE and 国 css PIE Andrew Lohman 


any style sheet from the fist to load tinto this page. 


THE ROAD TO ENLIGHTENMENT GARMENTS 
Litlering a dark and dreary road lay the past relics of browser-specific tags, DanMat 


incompatible DoMs, broken css support and abandoned browsers 





图 6.17 CSS Zen Garden 新 版 首页 设计 效果 


整个 页 面 内 容 简单 、 结 构 简 洁 ， 样 式 也 很 朴实 。 仔 细 查 看 它 的 结构 ， 会 发 现 整个 页 面 的 信息 一 目 | 
了 然 ， 结 构 层次 清晰 明了 。 信 息 从 上 到 下 ， 按 照 网 页 标题 、 网 页 菜单 、 主 体 栏目 信息 、 次 要 导航 和 页 | 
脚 信息 有 顺序 地 排列 在 一 起 ， 页 面 的 结构 如 图 6.18 所 示 。 | 


IPTTRTTTTTTTTT 
CSS Zen Garden 

The Beauty of CSS Design 

A demonetraton of what can be accomplished through CSS ased design Select any tyle sheet fom the hict to load tnto dns pagr 

Downloud the example hual file and ess fle 

The Road to Enlightenment 

Litterng a dark and dreary road lay the past relics of browser speciic tags. wcompatible DOMs, broken CSS suppor. and abandoned browsers. 

We mmust elear the miad of the past. Web enlightenent has baen achieved thanka 1o the tireleas efforrs of fail ke the W3C, WaSP, and the major bromaer ereators 


The CSS Zen Garden invites you to relax and meditae on the imporiant Iewons of the masters. Begin to see with clariry. Learm to we the ime-honored techniques in new and 
mvigorming fashion. Become one wrth the Neh 


So What ts This About? 


heteie ncounining need to boy the ower of CSS. Th Zen Garden sime bo ocite pire, end oncoerge participrion To begin, Wew rome of tre criting denigee in he 
ist. Clicking on any ope will load the style sheet into this very Page The HIML semains the same. he only thing tht has changed is the extermal CSS file Ye 


CSS allows complete and toml control over the syie of a hyperext docnment The oaly way this can be iliustrated in away that gers people excited 13 by demanstrating what 
can truly be, once the reins are placed in the hands of those able to create beauty fiom sirocture. Designers and coders alike have contibuted io the beagty of the Web we 
can always pushit 

Particlpation 


S sills are necestary too. but the example files are cormmented well enongh that 
advaneed terorials and tips on working with CSS 





图 6.18 禁用 全 部 CSS 样式 后 的 首页 结构 


整个 页 面 没有 一 幅 图 片 ， 这 是 完美 结构 的 基础 。CSS 禅 意 花园 的 标题 层级 明晰 ， 从 网 页 标题 (一 
级 标题 )、 网 页 副标题 〈 二 级 标题 ) 到 栏目 标题 〈 三 级 标题 ) 都 一 目 了 然 。 另 外 ， 段 落 信息 (P) 和 列 | 
表 信息 Cul) 占据 了 整个 页 面 信息 结构 。 | 
从 SEO 设计 的 角度 来 考察 , 可 以 看 到 Dave 把 所 有 导航 菜单 等 功能 信息 全 部 放 在 结构 的 后 面 , 很 | 
值得 学 习 。 
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用 际 
6.5.2 ”设计 方法 


对 于 普通 网 站 来 说 ， 一 般 页 面 都 会 存在 很 多 共同 的 信息 模块 ， 如 标题 (Logo)、 广 告 (Banner)、 
会 内 导航 (Menu)、 功 能 (Serve)、 内 容 (Content) 和 版 权 (Copyright) 等 信息 。 而 不 同类 型 的 网 站 有 不 
es 同 的 页 面 需 求 ， 对 于 各 种 公共 信息 模块 的 取舍 多 少 会 略 有 不 同 ， 这 时 就 应 该 具体 情况 具体 分 析 。 
vote 在 设计 网 页 基本 结构 时 , 不 妨 根据 信息 需求 的 简单 分 析 和 信息 的 重要 性 来 对 页 面 各 个 模块 进行 适 
当 排序 ， 然 后 设计 出 基本 的 框架 。 例 如 : 


| <div class="wrapper"> <!-- 网 页 结构 外 套 --> 
| <header role ="header"></ header> <!-- 网 页 标题 模块 -> 
| <nav role="navigation"> </nav> <!-- 网 页 菜单 模块 --> 
| <main role ="content"></main> <!-- 网 页 信息 模块 -> 
| <aside role="complementary"></aside> <!-- 次 要 导航 模块 -> 
| <footer></footer> <!-- 版 权 信息 模块 -> 
| </div> 


构建 基本 结构 应 该 注意 以 下 几 个 问题 。 
在 设计 基本 框架 时 ， 应 优先 考虑 HTML5 新 结构 标签 ， 把 div 元 素 作为 最 后 的 备 选 。 
使 用 role (HTMLS5 新 增 属性 ) 增强 标签 的 语义 性 ， 告 诉 辅助 设备 〈 如 屏幕 阅读 器 ) 当前 元 
素 所 扮演 的 角色 ， 以 增强 用 户 体验 。 
根据 需要 为 基本 结构 设置 id 和 class 属性 ， 作 为 钩子 ， 以 便 后 期 CSS 和 JavaScript 控制 。 
可 以 考虑 为 整个 页 面 结 构 设 计 一 个 外 套 ， 以 便 统 一 样式 。 
在 设计 结构 时 ， 不 要 考虑 后 期 呈现 ， 也 不 要 顾虑 结构 的 顺序 是 不 是 会 影响 页 面 的 显示 ， 从 纯 
语义 化 的 角度 来 设计 基本 框架 。 

有 了 基本 的 框架 结构 ， 可 以 继续 深入 ， 这 时 不 妨 去 完善 主体 区 域 的 结构 〈 即 网 页 内 容 模块 )， 这 
部 分 是 整个 页 面 的 核心 ， 也 是 思考 的 重点 。 

回 ” 此 时 ， 该 不 该 考虑 页 面 显 示 效 果 问 题 ? 

回 如何 更 恰当 地 堪 套 结构 ? 

回 如何 处 理子 模块 的 结构 关系 ? 
| 在 编辑 网 页 结构 的 全 部 过 程 中 不 要 去 考虑 页 面 显 示 效 果 问 题 ， 而 是 静 下 心 来 单纯 考虑 结构 。 但 
| 是 在 实际 操作 中 ， 会 不 可 避免 地 联想 到 页 面 的 显示 问题 ， 例 如， 分 几 行 几 列 显示 (这 里 的 行 和 列 是 
| 指 网 页 基本 结构 的 走向 问题 )。 不 同 的 行列 结构 肯定 都 有 适合 自己 的 结构 ， 所 以 读者 在 进入 这 一 步 
| 时 ， 适 当 考 虑 页 面 显示 问题 也 无 可 厚 非 ， 但 是 不 要 考虑 得 过 多 。 
| 恰当 的 柑 套 结构 需要 结合 具体 的 信息 来 说 ， 这 里 暂 不 详细 分 析 。 抽 象 地 说 ,模块 的 结构 关系 可 以 
| 分 为 3 种 基本 模型 。 
平行 结构 。 
| <div id="A"></div> 
| 
| 


回回 加 


<div id="B"></div> 
<div id="C"></div> 
包含 结构 。 
vi"A> 
| <div id—"B"></div> 
| <div id="C"></div> 
</div> 
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工 套 结构 。 
<div id="A"></div> 
<div> 
<div id="B"></div> f 
<div id="C"></div> | 医 岗 
机 | xpte 
Note 
具体 采用 哪 种 结构 都 不 重要 ， 可 以 根据 信息 的 结构 关系 来 进行 设计 。 如 果 <div id="latest"> 和 <div | 
id="m2"> 两 个 信息 模块 内 容 比较 接近 ， 而 <div id="subcol"> 模 块 与 它们 在 内 容 上 相差 很 远 ， Ba 
峰 套 结构 。 如 果 这 些 栏目 的 信息 类 型 雷同 ， 使 用 并 列 式 会 更 方便 。 


6.5.3 设计 思 


禅 意 花 园 犹如 一 篇 散文 ， 整 个 页 面包 含 3 部 分 。 
站 点 介绍 。 

支持 文本 。 

链接 列表 。 

1. 站 点 介绍 


站 点 介绍 部 分 犹如 抒情 散文 ， 召 唤 你 赶紧 加 入 CSS 标准 设计 中 来 ， 该 部 分 包含 3 部 分 。 

标题 ， 包 括 网 站 主 副标题 。 

概述 ， 呼 唤 网 友 赶紧 加 入 进来 。 

序言 ， 回 忆 和 总 结 当前 标准 之 路 的 艰巨 性 和 紧迫 性 。 

2. 支持 文本 

支持 文本 部 分 犹如 叙事 散文 , 九 娓 道 来 , 详细 介绍 活动 的 内 容 ， 用 户 参 与 的 条 件 、 支持、 好 处 等 。 
这 是 什么 ? 

回 ” 邀 您 参与 。 | 
加 ”参与 好 处 。 | 
参与 要 求 。 | 
另外 ， 末 尾 还 包含 了 各 种 技术 参考 网 站 。 

3. 链接 信息 | 
第 三 部 分 很 简洁 地 列 出 了 所 有 超 链 接 信 息 。 该 部 分 也 包含 3 小 块 链接 信息 。 


6.5.4 构建 基本 框架 


根据 信息 进行 分 类 ， 然 后 根据 分 类 进行 分 块 ， 下 面 就 可 以 来 建立 禅 意 花园 的 基本 框架 了 : 一 个 网 
页 包含 框 包含 了 3 个 平行 的 结构 。 | 
| 





<div class= page-wrapper> <!-- 网 页 结构 外 套 --> | 
<section class="intro" id="zen-intro"></section> <!-- 站 点 介绍 -> | 
<div class="main supporting" id="zen-supporting" role="main"></div> ”<!-- 支持 文本 --> | 
<aside class="sidebar' role="complementary"></aside> <!-- 链接 列表 --> | 
</div> | 
人 


“Me 
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继续 拓展 结构 ， 完 成 三 级 基本 结构 的 设计 。 


<div class="page-wrapper"> 
<section class="intro" id="zen-intro"> 
<!-- 网 页 标题 信息 块 -> 
<header role="banner"></header> 
<!-- 概述 --> 
<div class="summary" id="zen-summary" role="article"></div> 
<!-- 序言 -> 
<div class="preamble" id="zen-preamble" role="article"></div> 
</section> 
<div class="main supporting" id="zen-supporting" role="main"> 
<!-- 这 是 什么 ? -> 
<div class="explanation" id="zen-explanation" role="article"></div> 
<!-- 邀 您 参与 -> 
<div class="participation" id="zen-participation" role="article"></div> 
<!-- 参与 好 处 -> 
<div class="benefits" id="zen-benefits" role="article"></div> 
<!-- 参与 要 求 -> 
<div class="requirements" id="zen-requirements" role="article"></div> 
<!-- 各 种 技术 参考 网 站 --> 
<footer></footer> 
</div> 
<aside class="sidebar" Iole="complementary"> 
<!-- 内 机 包含 框 
<div class="wrapper"> 
<!-- 优秀 作品 列表 --> 
<div class="design-selection" id="design-selection"></div> 
<!-- 存档 列表 -> 
| <div class="design-archives" id="design-archives"></div> 
| <!-- 资源 链接 信息 --> 
| <div class="zen-resources" id="zen-resources"></div> 
</div> 
</aside> 
</div> 


在 构建 基本 结构 时 ， 应 该 考虑 SEO 设计 ， 把 重要 信息 放 在 前 面 ， 而 对 于 功能 性 信息 放 在 结构 的 








末尾 
6.5.5 “完善 网 页 结构 


| 禅 意 花园 的 结构 非常 简洁 ， 主 要 使 用 了 section、header、footer、 nav、hl、h2、h3、p、ul、 li、a、 
| abbr、span 元 素 ， 语 义 明晰 ， 没 有 宛 余 的 标签 和 无 用 的 嵌 套 结构 。 具 体 分 析 如 下 。 
| 第 1 步 ， 首 先 看 一 下 标题 信息 : 标题 使 用 恰当 ， 层 次 清晰 。 例 如 ， 在 标题 栏 header 中 ， 使 用 hl 
和 h2 定义 网 站 标题 ， 以 及 描述 信息 。 
<header role="banner"> 
<hl>CSS Zen Garden</h1l> 


<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2> 
</header> 
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然后 ， 在 下 面 各 个 子 栏目 中 ， 使 用 h3 定义 子 栏目 标题 ， 例 如 : 


<div class="preamble" id="zen-preamble" role="article"> 
<h3>The Road to Enlightenment</h3> 


<pD>……<p> 
<pD>…<p> 
<pD>……</p> 
</div> 


上 面 是 “序言 ” 子 栏目 的 标题 ， 下 面 跟随 3 段 文本 ， 设 计 了 一 个 子 文章 块 。 后面 的 各 个 子 栏目 设 
计 都 遵循 这 样 的 结构 和 思路 。 





一 般 网 页 只 能 够 有 一 个 一 级 标题 ,用 于 网 页 题目 ， 然 后 根据 结构 的 层次 关系 有 序 使 用 不 同 级 别 标 ， 


题 ， 这 一 点 很 多 设计 师 都 忽略 了 。 从 SEO 的 角度 来 考虑 ， 合 理 使 用 标题 是 非常 重要 的 ， 因 为 搜索 引 
擎 对 于 不 同 级 别 标题 的 敏感 性 是 不 同 的， 级 别 越 大 ， 检 索 的 机 会 就 越 大。 
第 2 步 ， 再 来 看 一 下 footer 信息 ， 代 码 如 下 : 


<footer> 
<a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217:s HTML" 
class="zen-validate-html">HTML</a> 
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS" 
class="zen-validate-css">CSS</a> 
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this 
site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a> 
<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" 
class="zen-accessibility">Ally</a> 
<a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" 
class="zen-github">GH</a> 
</footer> 


整个 版 面 除了 必要 的 链接 文本 外 , 没有 任何 多 余 的 标签 , 每 个 超 链接 包含 必要 的 href、 title 和 class | 


属性 ， 比 较 简 洁 。 用 户 可 以 根据 页 面 风格 来 设计 footer 信息 的 样式 和 位 置 ， 默 认 效果 如 图 6.19 所 示 。 


[osm oe me 


mediatemple Zen Garden, the 





图 6.19 版 权 信 息 图 标 
第 3 步 ， 导 航 列表 信息 使 用 nav 定义 ， 包 含 在 列表 中 ， 例 如 : 
<div class="design-archives" id="design-archives"> 
<h3 class="archives">Archives:</h3> 
<nav role="navigation"> 
<uP 
<li class="next"> 
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| <a href="/214/pagel">Next Designs <span class="indicator">&rsaquo:</span></a> 
| </> 
| <li class="viewall"> 
久 | <a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to 
合 F the Zen Garden."> View All Designs</a> 
| es 


3 
</nav> 


| </div> 

| 页 面 中 还 有 多 处 类 似 结构 ， 不 再 一 一 列举 。 

| 第 4 步 ， 禅 意 花园 把 正文 版 式 设计 得 精简 至 极 ， 总 共 使 用 了 a、span 和 abbr 三 个 行内 元 素 。 其 中 
| 使 用 a 来 定义 文本 内 超 链 接 信息 ， 在 超 链接 中 添加 了 提示 文本 。 例 如 : 

| <a href="/examples/index" title="This page's source HTML code. not to be modified.">html file</a> 


使 用 span 为 部 分 文本 定义 样式 类 ， 例 如 : 

<a href="/214/pagel">Next Designs <span class="indicator">&rsaquo:</span></a> 
使 用 abbr 截取 首 字 母 缩写 ， 例 如 : 

<abbr title="Cascading Style Sheets">CSS</abbr> 


| 由 于 页 面 结构 主要 提供 基本 文字 信息 , 因此 作者 没有 使 用 img 元 素 在 结构 中 嵌入 图 像 ， 如 果 用 户 
| 需要 图 像 来 装饰 页 面 ， 仅 使 用 CSS 即 可 ， 不 必 破 坏 文档 结构 。 
| 在 设计 版 式 结构 中 ， 标 准 设计 的 一 般 原则 如 下 。 
| 包含 信息 的 图 像 应 该 使 用 img 元 素 插入 ， 如 新 闻 图 片 、 欣 赏 性 质 的 图 像 ， 传 递 某 种 信息 的 
| 图 案 、 图 示 等 。 
| 不 包含 任何 有 用 的 信息 ， 仅 负责 页 面 版 式 或 功能 的 修饰 ， 则 应 该 以 背景 图 像 的 方式 显示 。 
| 第 5 步 ， 网 站 为 了 方便 设计 师 艺术 设计 ， 特 意 在 文档 尾部 预 留 了 6 个 div 结构 接口 。 
| <div class="extral" role="presentation"></div> 

<div class="extra2" role="presentation"></div> 

<div class="extra3" role="presentation"></div> 

<div class="extra4" role="presentation"></div> 

<div class="extra$" role="presentation"></div> 

<div class="extra6" role="presentation"></div> 

这 些 多 余 的 div 作为 备用 结构 标签 ， 最 初 提供 的 目的 是 : 方便 设计 师 增 加 额外 信息 ， 它 们 相当 于 

程序 的 接口 ， 如 果 不 用 可 以 隐藏 。 

但 是 随 着 CSS3 功能 的 完善 ， 我 们 完全 可 以 使 用 ::before 和 ::after 伪 对 象 进行 支持 ， 因 此 不 再 建议 
使 用 这 些 代替。 这 些 只 保留 历史 设计 的 兼容 性 ， 未 来 很 可 能 会 被 Dave Shea 删除 。 


6.6 在 线 练 习 


练习 设计 各 种 表格 的 样式 。 
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第 了 章 
设计 表单 


HTML5 对 HIML4 表单 模块 进行 了 全 面 升级 ， 在 保持 简便 、 易 用 的 基础 上 ， 新 增 了 很 多 控 
件 和 属性 ， 减 少 开发 人 员 的 代码 编写 强度 。 本 章 将 详细 介绍 HTML5 表单 结构 的 设计 。 


【 学 习 要 点 】 

WI 熟悉 不 同类 型 的 表单 控件 
WH 正确 设置 表单 控件 的 属性 
MH 能 够 设计 HIMLS 表单 页 面 


ge A 


7.1 新 建 表单 


| 
| 表单 是 用 户 与 网 站 进行 对 话 的 窗口 , 主要 包括 输入 框 、 下 拉 框 、 单 选 按钮 、 复 选 框 和 按钮 等 对 象 ， 
pte 每 类 对 象 在 表单 中 所 起 到 的 作用 各 不 相同 ,每 个 表单 元 素 在 浏览 器 中 的 呈现 效果 也 不 同 。 下 面 介绍 如 
回 | 何 设计 基本 的 表单 结构 。 
7.1.1 ”使 用 <form> 标 签 
or 
视频 讲解 | <form> 标 签 用 于 为 用 户 输入 创建 HTML 表单 。 表 单 包含 各 种 输入 控件 ， 如 文本 框 、 复 选 框 、 单 
| 选 按钮 、 提 交 按 钮 等 ， 它 能 够 向 服务 器 传输 数据 。 
【示例 】 新 建 HTMLS5 文档 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 包 含 两 个 <input> 标 签 
| 和 一 个 提交 按钮 ， 并 使 用 <p> 标 签 把 按钮 和 文本 框 分 行 显示 。 
<h2> 会 员 登 录 </h2> 
<form action="#" method="get" id="forml1" name="forml"> 
<p> 会 员 : <input name="user" id="user" type="text" /></p> 
<p> 密 码 ，<input name="password" id="password" type="text" /></p> 
<p><input type="submit" value=" 登 录 "/></p> 
</form> 


在 正 浏 览 器 中 预览 ,演示 效果 如 图 7.1 所 示 。 









7.1 表单 的 基本 效果 


”从 上 面 代码 可 以 看 到 ， 一 个 完整 的 表单 结构 包含 3 部 分 内 容 : 
| 回 ”表单 框 (<fom> 标 签 ) : 从 结构 上 分 析 , <form> 标 签 是 一 个 包含 框 , 里 面包 含 所 有 表单 控件 。 
| <form> 负 责 向 服务 器 提交 数据 ， 因 此 需要 设置 提交 信息 的 字符 编码 、 与 服务 器 交互 的 程序 、 
HTTP 提交 方式 等 信息 。 
| 回 表单 域 (<input>、<select> 等 标签 ) : 用 于 采集 用 户 输入 的 各 种 控件 ， 如 文本 框 、 文 本 区 域 、 
| 密码 框 、 隐 藏 域 、 单 选 按钮 、 复 选 框 、 下 拉 选 择 框 及 文件 上 传 框 等 。 
| 表单 按钮 (<input>、<button> 标 签 ): 用 于 触发 交互 事情 的 按钮 ， 如 提交 、 复 位 ， 以 及 不 包 
| 含 任何 行为 的 一 般 按钮 。 

<form> 标 签 包含 很 多 属性 ， 其 中 HTMLS 支持 的 属性 如 表 7.1 所 示 。 

如 果 让 表单 正确 提交 数据 ， 与 服务 器 进行 对 话 ， 需 要 设置 下 面 3 个 基本 属性 。 
| 回 action: 定 义 服务 器 端 处 理 程序 ,程序 URL 可 以 是 相对 地 址 或 是 绝对 地 址 。 当 设置 为 action="#" 
| 时 ， 表 示 提 交 给 当前 页 面 的 处 理 程序 。 
| 可 enctype: 定义 HTTP 字符 编码 格式 。 主 要 包括 3 种 格式 : 


回 


~ s 
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党 ”application/x-www-form-urlencoded: 默认 值 ， 以 名 / 值 对 的 形式 编码 表单 数据 。 | 
党 ”multipart/form-data: 以 消息 的 形式 编码 表单 数据 。 当 提交 二 进 制 文件 时 ， 必 须 设置 | 
为 该 值 。 | 
避 textlplain: 以 纯 文 本 形式 进行 编码 。 发 送 邮 件 时 需要 设置 该 编码 类 型 。 
method: 定义 HTTP 传输 方式 ， 主 要 包括 两 种 方式 : get 和 post， 在 数据 传输 过 程 中 分 别 对 | 
应 HITP 协议 中 的 GET 和 POST 方法 。 Note 

学 get: HTTP 协议 以 GET 方法 传输 数据 ， 当 提交 数据 时 ， 在 浏览 器 地 址 栏 中 可 以 看 到 提 | 

交 的 字符 串 。 这 种 方式 适合 传输 简单 、 非 机 密 的 信息 。 | 
党 ”post: HTTP 协议 以 POST 方法 传输 数据 ， 这 种 方法 适合 传输 大 量 数据 。 


表 7.1 HTML5 支持 的 <form> 标 签 属性 











属 性 值 说 有明 
accept-charset “| charset list 规定 服务 器 可 处 理 的 表单 数据 字符 集 
action URL 规定 当 提交 表单 时 向 何 处 发 送 表单 数据 
autocomplete “| on、 off 规定 是 否 启用 表单 的 自动 完成 功能 
enctype 参考 下 面 说 明 规定 在 发 送 表单 数据 之 前 如 何 对 其 进行 编码 | 
method get、 post 规定 用 于 发 送 form-data 的 HTTP 方法 | 
name form name 规定 表单 的 名 称 | 
novalidate novalidate 如 果 使 用 该 属性 ， 则 提交 表单 时 不 进行 验证 
target _blank、_self、_parent top、framename 规定 在 何 处 打开 action URL 


7.1.2 ”使 用 <input> 标 签 


<input> 标 签 用 于 搜集 用 户 信息 。 根 据 不 同 的 type 属性 值 ， 输 入 字段 拥有 多 种 形式 ， 如 文本 框 、 
复 选 框 、 单 选 按钮 、 图 像 域 、 文 件 域 、 提 交 按钮 等 。<input> 标 签 基本 用 法 如 下 所 示 : 
<input type=" "> 





| 
| 
type 属性 定义 输入 框 的 类 型 ， 如 果 没 有 设置 type 属性 ， 默 认 显 示 为 单行 文本 框 。type 取 值 包括 : | 
button (按钮)、checkbox〔 复 选 框 )、file (文件 域 )、hidden 隐藏 域 )、image (图 像 域 )、password | 
(密码 框 )、radio( 单 选 按钮 )、reset ( 重 置 按钮 )、submit 〈 提 交 按 钮 )、text (文本 框 )。 | 


伟 提示 : HTML5 新 增 了 大 量 type 新 值 ， 我 们 将 在 下 面 一 节 内 详细 说 明 。 


| 
| 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <body> 内 使 用 <form> 标 签 包含 3 个 <input> 标 签 ， 
分 别 使 用 3 种 方式 定义 文本 框 。 | 
<form action="server.php" method="get" id=-"foml" name="foml"> 
<p> 第 一 种 方式 <input /></p> | 
<p> 第 二 种 方式 <input type="" /></p> | 
<p> 第 三 种 方式 <input type="text" /></p> | 

</form> 
在 正 浏览 器 中 预览 ， 则 演示 效果 如 图 7.2 所 示 。 虽 然 结 果 是 一 致 的 ， 但 是 为 保持 3 
良好 的 代码 书写 习惯 ， 应 遵循 HTML 标准 ， 按 照 第 三 种 方式 设计 文本 框 。 
<form> 标 签 包含 大 量 属性 , 感 兴趣 的 读者 可 以 扫 码 查看 所 有 HIMLS 支持 的 属性 。 Ee 








"123。 


ae 从 入 门 到 精通 ( 微 香 精 编 版 ) 


a 
下 面 简 单 介 绍 一 下 常用 属性 : 

maxlength: 设置 输入 字符 的 最 大 长 度 ， 例 如 ， 在 下 面 的 代码 中 设置 最 多 输入 三 个 字符 ， 当 
输入 第 四 个 字符 时 ， 光 标 无 法 继续 移动 ， 即 无 法 输入 。 





Note | value: 设置 默认 值 。 例 如 ， 在 下 面 代码 中 设置 默认 值 为 “输入 用 户 名 ”。 
<input type="text" value=" 输 入 用 户 名 " > 


size: 设置 输入 框 的 宽度 ， 建 议 使 用 CSS 的 width 属性 代 蔡 控制 。 

<input type="text" value=" 输 入 用 户 名 " size="50" maxlength="100"/> 

readonly 和 disabled: 布尔 值 ， 其 中 readonly 定义 表单 对 象 为 只 读 状态 ，disabled 定义 表单 对 
象 为 不 可 用 状态 。 


只 读 文本 框 : <input type="text" readonly /> 
不 可 用 文本 框 : <input type="text” disabled /> 


【示例 2】 新 建 一 个 网 页 ， 保 存 为 test2.html， 在 <body> 标 签 内 输入 如 下 代码 。 
<input type="password" value=" 请 输入 密码 " > 
将 <input> 标 签 的 type 属性 设置 为 password， 文 本 域 将 变 为 密码 输入 框 ， 此 时 输入 的 字符 以 星 号 


。 或 加 点 显示 ， 密码 输入 框 的 主要 作用 是 在 输入 密码 时 防止 别人 偷 看 。 
【示例 3】 新 建 一 个 网 页 ， 保 存 为 test3.html， 在 <body> 标 签 内 输入 如 下 代码 。 


| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| <input type=" hidden" value="123456" > 
| 隐藏 域 (type="hidden") 就 是 在 网 页 中 不 显示 的 信息 ， 当 提交 表单 时 ， 它 包含 的 信息 也 被 提供 给 
服务 器 。 注 意 ， 隐 藏 域 只 包含 一 个 value 属性 ， 使 用 该 属性 可 以 传递 固定 值 到 服务 器 。 
| 【示例 4】 新 建 一 个 网 页 ， 保 存 为 test4.html， 在 <body> 标 签 内 输入 如 下 代码 。 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


<form action="server.php" method="get" id="form]1" name="fomml"> 
<p> 上 传 照片 ， <input name="" type="file" /></p> 
<p><input type="submit" value=" 上 传 图 片 "/></p> 

</form> 


在 浏览 器 中 演示 效果 如 图 7.3 所 示 。 


使 用 三 种 方式 定义 文本 框 


第 -和 方 z Gas ev -sclsseeo | 


第 二 种 方式 ，[anpm pe" 
第 三 种 方式 ，[enpu ypeear 人 一] 


上 传 风 片 ，| 测 览 … 
上 传 图 片 











图 7.2 单行 文本 框 <input> 标 签 书写 方式 图 7.3 文件 上 传 组 件 


| 文件 上 传 组 件 包括 文本 框 和 浏览 按钮 。 文 件 上 传 (type="file") 可 以 将 本 文件 以 二 进 制 数据 的 形 
| 式 上 传 到 服务 器 。 
| “使 用 文本 区 域 (<textarea>) 可 以 允许 用 户 输入 大 容量 信息 。 主 要 应 用 在 用 户 留言 或 者 聊天 窗口 


等 表单 中 。 
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【示例 5】 新 建 一 个 网 页 ， 保 存 为 test5.html， 在 <body> 标 签 内 输入 如 下 代码 。 


<form> 
<table width="600" align="center"> 
<tr> <td> 客 户 留言 方式 一 : </td><td> 客 户 留言 方式 二 : </td></tr> 
<t> 


<td><textarea name="" cols="40" rows="6" readonly="readonly" > 输入 内 容 </textarea></td> 
<td><textarea name="" cols="40" rows="6" disabled="disabled" > 输入 内 容 </textarea></td> 


< 
</table> 
</form> 


在 上 面 示例 中 ， 为 客户 提供 留言 输入 框 ， 定 义 了 输入 的 字符 宽度 和 显示 的 行 数 ， 并 分 别 使 用 了 


readonly、disabled 属性 ， 比 较 效果 如 图 7.4 所 示 。 


客户 留言 方式 一 ， 


图 7.4 为 文本 区 域 分 别 设置 readonly 和 disabled 属性 


突 提示 :<textarea> 标 签 包含 cols、 wrap、rows 3 个 专 有 属性 ， 简 单 说 明 如 下 。 
回 eols: 设置 文本 区 域内 可 见 字符 宽度 。 建 议 使 用 CSS 的 width 属性 代替 控制 。 
回 rows: 设置 文本 区 域内 可 见 行 数 。 建 议 使 用 CSS 的 height 属性 代替 控制 。 


回 wrap: 定义 输入 内 容 大 于 文本 区 域 宽度 时 显示 的 方式 。 


党 soft: 默认 值 ， 当 在 表单 中 提交 时 ，textarea 中 的 文本 不 换行 。 
澡 ”hard: 当 在 表单 中 提交 时 ，textarea 中 的 文本 换行 ( 包含 换行 符 )。 当 使 用 hard 时 ， 


必须 设置 cols 属性 。 


7.1.3 使 用 选项 控件 


HTML5 定义 3 类 可 供 选项 操作 的 输入 控件 : 单 选 按钮 、 复 选 枉 和 列表 框 ， 


和 优点 ， 下 面 结合 示例 进行 说 明 。 


使 用 <input type="radio"> 可 以 定义 单 选 按钮 ， 多 个 name 属性 值 相同 的 单 选 按钮 可 以 合并 为 一 组 ， 


称 为 单 选 按钮 组 。 在 单 选 按钮 组 中 ， 只 能 选择 一 个 ， 不 能 够 空 选 或 多 选 。 


【示例 1】 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 包含 3 个 单 选 按钮 。 


<h2> 会 员 登 录 </h2> 
<form action="#" method="get" id="form1" name="forml1"> 
<p> 会 员 : <input name="user" id="user" type="text" /></p> 
<p> 密 码 : <input name="password" id="password" type="text" /></p> 
<p> 类 型 : 
<label><input type="radio" name="grade" value="1" 
checked="checked" /> 普通 会 员 </label> 
<label><input type="radio" name="grade" value="2" /> VIP 会 员 </label> 
<label><input type="radio" name="grade" value="3" /> 管理 员 </label> 
<p> 
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它们 各 有 不 同 的 用 途 
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<p><input type="submit' value=" 登 录 "/></p> 
| </form> 

| 

| 在 正 浏 览 器 中 预览 ， 演 示 效 果 如 图 7.5 所 示 。 


A 拟 注意 : 在 设计 单 选 按钮 组 时 , 应 该 设置 单 选 按 钮 组 的 默认 值 , 即 为 其 中 一 个 单 选 按钮 设置 checked 
Note | 属性 。 如 果 不 设置 初始 的 默认 值 ， 会 引发 歧义 : 用 户 以 为 不 需要 选择 ， 影 响 表单 最 后 数据 
| 提交 。 
| 使 用 <input type="checkbox"> 可 以 定义 复 选 框 , 多 个 name 属性 值 相同 的 复 选 框 可 以 合并 为 
| 一 组 ， 称 为 复 选 框 组 。 在 复 选 框 组 中 ， 允 许 用 户 不 选 或 者 多 选 。 也 可 以 使 用 checked 属性 
设置 默认 选项 项 目 。 


| 
| 
| 【示例 2】 在 下 面 示例 中 ， 设 计 一 个 多 项 选择 题 : 选择 个 人 选 学 的 技术 ， 包 含 3 个 选项 ， 演 示 效 
| 果 如 图 7.6 所 示 。 


<form> 

<p> 学 员 ID: <input type="text" value="" /></p> 

<p> 选 学 的 技术 : 
<label><input name="web" type="checkbox" value="html" /> HTML5</label> 
<label><input name="web" type="checkbox" value="css" />CSS3</label> 
<label><input name="web" type="checkbox" value="js" /> JavaScript</label> 

</p> 

<p><input type="submit" value=" 提 交 "/></p> 


Dj 

?mm | 

选 学 的 技术 ， 口 HTML5 口 Css3 口 JavaScript 
E59| 





7.5 单 选 按钮 组 效果 7.6 复 选 框 组 效果 
使 用 <select> 标 签 可 以 设计 选择 框 ， 在 <select> 标 签 内 包含 一 个 或 多 个 <option> 标 签 ， 使 用 它 可 以 


使 用 <optgroup> 标 签 可 以 对 选择 项 目 进行 分 组 ， 一 个 <optgroup> 标 签 包含 多 个 <option> 标 签 ， 然 
| 后 使 用 label 属性 设置 分 类 标题 ， 分 类 标题 是 一 个 不 可 选 的 伪 标 题 。 
选择 框 可 以 显示 为 两 种 形式 : 
下 拉 菜 单 : 当 在 选择 框 中 只 能 够 选择 一 个 项 目 时 ， 选 择 框 呈现 为 下 拉 菜 单 样式 ， 这 样 可 以 节 
省 网 页 空间 。 
列表 框 : 当 设 置 多 选 时 ， 选 择 框 呈 现 为 列表 框 样式 ， 可 以 设置 它 的 高 度 。 如 果 项 目 数 超出 列 
表 框 的 高 度 ， 会 显示 滚动 条 ， 通 过 拖 动 滚动 条 查看 并 选择 多 个 选项 。 
【示例 3】 在 下 面 的 示例 中 ， 通 过 下 拉 菜 单 设计 城市 列表 ， 让 用 户 选择 ， 通 过 <optgroup> 标 签 将 
| 城市 进行 分 组 ， 方便 对 城市 进行 分 类 ， 使 用 selected 属性 设置 下 拉 菜 单 的 默认 值 为 “青岛 >。 如 果 没 
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有 定义 该 属性 ， 则 将 显示 为 第 一 个 选项 ， 即 “潍坊 ”。 


<form> 
<p> 姓 名 : <input type="text" value="" /></p> 
<p> 所 在 城市 : 
‘<select name="city"> 
<optgroup label=" 山 东 省 "> 
<option value=" 潍 坊 "> 潍坊 </option> 
<option value=" 青 岛 " selected="selected"> 青 岛 </option> 
</optgroup> 
<optgroup label=" 山 西 省 "> 
<option value=" 太 原 "> 太 原 </option> 
<option value=" 榆 次 "> 榆 次 </option> 
</optgroup> 


</select></p> 
<p><input type="submit" value=" 提 交 "/></p> 
</form> 


页 面 演示 效果 如 图 7.7 所 示 。 








图 7.7 下 拉 菜 单 效 果 


【拓展 】 

<select> 标 签 包 含 两 个 专 有 属性 ， 简 单 说 明 如 下 。 

回 size: 定义 列表 框 可 以 显示 的 项 目 数 ，<optgroup> 标 签 也 计算 在 其 中 。 
multiple: 定义 选择 框 可 以 多 选 。 


7.1.4 使 用 辅助 控件 


表单 包含 多 个 辅助 控件 ， 用 于 辅助 设计 表单 结构 ， 简 单 说 明 如 下 : 











<fieldset>: 为 表单 对 象 进行 分 组 ,一 个 表单 可 以 包含 多 个 <fieldset> 标 签 。 默认 状态 下 ， 2 


的 表单 对 象 外 面 会 显示 一 个 包围 框 。 
<legend>: 定义 每 组 的 标题 ， 默 认 显示 在 <fieldset> 包 含 框 的 左上 角 。 


<label>: 定义 表单 对 象 的 提示 信息 。 通 过 for 属性 ， 可 将 提示 信息 与 表单 对 象 绑 定 在 一 起 。 


当 用 户 单 击 提示 信息 时 ， 将 会 激活 对 应 的 表单 对 象 。 如 果 不 使 用 for 属性 ， 通 过 <label> 标 签 | 


包含 表单 对 象 ， 也 可 以 实现 相同 的 设计 目的 。 
【示例 】 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 设计 一 个 复杂 的 表单 结构 。 售 | 


助 各 种 辅助 控件 实现 对 表单 进行 分 组 ， 代 码 如 下 所 示 。 


st27* 


| 
| 
| 
Ls 





<h2> 用 户 信息 登录 </h2> 
<form action="#" class="forml"> 
<fieldset class="fld1"> 
<legend> 个 人 信息 </legend> 
<p><label for="name"> 姓 名 </label><input id="name"></p> 
<p><label for="address"> 地 址 </label><input id="address"></p> 
<p><label for="sex"> 性 别 </label> 
‘<select id="sex"> 
<option value="female"> 女 </option> 
<option value="male"> 男 </option> 
</select> 


<p> 
</fieldset> 
<hr> 
<fieldset class="fld2"> 
<legend> 其 他 信息 </legend> 
<p><fieldset> 
<legend> 你 喜欢 什么 运动 ?</legend> 
<label for="football"> 
<input id="football" name="yundong” type="checkbox"> 足 球 </label> 
<label for="basketball"> 
<input id="basketball" name="yundong” type="checkbox"> 篮 球 </label> 
<label for="ping"> 
<input id="ping" name="yundong” type="checkbox"> 乒 乓 球 </label> 
</fieldset></p> 
eldset> 
<legend> 请 写 下 你 的 建议 ? </legend> 
<label for="comments"> 
<textarea id="comments" rows="7" cols="25"></textarea></label> 
</fieldset></p> 
</fieldset> 
<input value=" 提 交 个 人 信息 " type="submit"> 
</form> 


演示 效果 如 图 7.8 所 示 。 


请 写 下 必 的 寻 议 ? 





7.8 设计 复杂 的 表单 结构 
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用 户 在 设计 表单 时 ， 常 常 为 选用 何 种 表单 对 象 而 烦恼 ， 如 对 于 国 别 项 是 使 用 输入 文本 框 好 ,还 是 ， 
使 用 下 拉 菜 单 好 ， 日 期 选项 是 让 用 户 自己 输入 ， 还 是 允许 用 户 进行 选择 ? 如 此 等 等 ， 关 于 这 个 问题 ， | 
我 们 可 以 给 出 一 点 建议 

回 “不 确定 答案 可 以 建议 用 户 输入 ， 而 不 是 让 用 户 选 择 。 例 如 ， 姓 名 、 地 址 、 电 话 等 常用 信息 

使 用 输入 的 方式 收集 会 比 使 用 选择 的 方式 收集 更 加 自然 且 简单 。 | 

回 ” 对 于 容易 记 错 的 答案 不 妨 让 用 户 选择 , 此 时 就 不 适合 让 用 户 使 用 输入 框 来 输入 , 如 国家 、 年 、 

月 、 日 、 星 座 等 ， 采 用 形式 可 以 使 用 单 选 按钮 组 、 复 选 框 、 列 表 框 、 下 拉 菜 单 等。 | 

回 ”为 控件 设置 默认 值 ， 建 议 采用 一 些 提示 性 说 明文 字 或 常用 值 ， 能 够 提醒 用 户 输入 , 这 是 一 个 | 
很 人 性 化 的 设计 ， 用 户 应 该 考虑 。 | 

回 “” 对 于 单 选 按钮 组 、 复 选 框 或 下 拉 菜 单 时 ， 设 计 控件 的 value 属性 值 或 显示 值 应 从 用 户 的 角度 | 
考虑 ， 努 力 使 用 户 浏览 选项 的 时 候 更 方便 、 简 单 ， 避 免 出 现 歧义 或 误解 的 值 。 | 

对 于 单 选 、 复 选 的 选项 ， 减 少 选项 的 数量 ， 同 时 也 可 以 使 用 短语 来 作为 选项 。 | 
对 于 选项 的 排列 顺序 ， 最 好 遵循 合理 的 逻辑 顺序 ， 如 按 首 字母 排列 、 按 声母 排列 ， 并 根据 普 | 
饥 情 况 确定 默认 值 。 | 
加 “用户 在 设计 表单 时 ， 还 应 该 避免 使 用 多 种 表单 控件 ， 使 用 多 种 表单 控件 能 够 使 页 面 看 起 来 更 | 
好 看 ， 而 实际 上 不 利于 用 户 的 操作 。 | 








| 
对 于 选择 控件 ， 使 用 时 还 应 该 注意 下 面 几 个 问题 : 
加 当 用 户 进行 选择 时 ， 如 果 要 希望 用 户 浏览 所 有 选项 ， 则 应 该 使 用 单 选 按钮 组 或 复 选 框 , 而 不 
应 该 使 用 下 拉 菜 单 。 下 拉 菜 单 会 隐藏 部 分 选项 ,对 于 用 户 来 说 ,可 能 不 会 耐心 地 单 击 下 拉 菜 ， 

单 逐 个 浏览 每 个 菜单 项 。 

| 

| 

| 

| 





当选 项 很 少时 ,不 妨 考虑 使 用 单 选 按 钮 组 或 复 选 框 ， 而 设计 过 多 的 选项 时 ,使 用 单 选 按 钮 组 
或 复 选 框 会 占用 很 大 的 页 面 ， 此 时 不 妨 考虑 使 用 下 拉 菜 单 。 

回 多 项 选择 可 以 有 两 种 设计 方法 : 使 用 复 选 框 和 使 用 列表 框 。 使 用 复 选 框 要 比 使 用 列表 框 更 直 | 
观 ， 不 清楚 列表 框 的 作用 和 操作 方法 ， 这 时 就 需要 加 上 说 明 性 文字 ， 显 然 这 样 做 就 没有 复 选 
框 那样 简单 。 


7.2 设计 新 型 输入 框 


HTMLS5 新 增 了 多 个 输入 型 表单 控件 ， 通 过 使 用 这 些 新 增 的 表单 输入 类 型 ， 可 以 实现 更 好 的 输入 
体验 。 目 前 ，Opera 浏览 器 支持 最 好 ， 不 过 在 所 有 主流 浏览 器 中 都 可 以 使 用 ， 即 使 不 被 支持 ， 仍 然 可 
以 显示 为 普通 的 文本 框 。 

深 提示 :可 以 访问 https://caniuse.com/ 或 者 www.wufoo.com/html5 详细 了 解 浏览 器 支持 信息 。 
7.2.1 定义 Email 杠 


email 类 型 的 input 元 素 是 一 种 专门 用 于 输入 Email 地 址 的 文本 框 , 在 提交 表单 的 时 候 会 自动 验证 | 
Email 输入 框 的 值 。 如 果 不 是 一 个 有 效 的 电子 邮件 地 址 ， 则 该 输入 框 不 允许 提交 该 表单 。 | 
【示例 】 下 面 是 email 类 型 的 一 个 应 用 示例 。 | 
<form action="demo form.php" method="get"> | 
请 输入 您 的 Email 地 址 : <input type="email" name="user email' /><br /> L 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.9 所 示 。 如 果 输 入 了 错误 的 Email 地 址 格式 ， 单 
| 击 “ 提 交 ” 按 钮 时 会 出 现 如 图 7.10 所 示 的 “请 输入 电子 邮件 地 址 ”的 提示 。 





D localhost/inder hml x D localhosUindexl aml x eo 


C | © localhosyindexi himl 日 C | © iochosundsc nml 女 ] : 


请 给 人 密 的 Email 地 址 ; 请 输入 您 的 Email 地 址 ; 加 
失 交 er 


Oisette 
括 '@"。 3 中 识 少 @"， 


图 7.9 email 类 型 的 input 元 素 示例 7.10 检测 到 不 是 有 效 的 Email 地 址 


对 于 不 支持 type="email" 的 浏览 器 来 说 ， 将 会 以 type="text" 来 处 理 ， 所 以 并 不 妨碍 旧版 浏览 器 浏 
览 采用 HTMLS5 中 type="email" 输 入 框 的 网 页 。 


7.2.2 定义 URL 杠 


url 类 型 的 input 元 素 提供 用 于 输入 url 地 址 的 文本 框 。 当 提交 表单 时 , 如 果 所 输入 的 是 url 地 址 格 
| 式 的 字符 串 ， 则 会 提交 服务 器 ， 如 果 不 是 ， 则 不 允许 提交 。 
【示例 】 下 面 是 url 类 型 的 一 个 应 用 示例 。 
<form action="demo form.php" method="get"> 
请 输入 网 址 : <input type="url" name="user_url" /><br/> 
3 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.11 所 示 。 如 果 输 入 了 错误 的 url 地 址 格式 ， 单 击 
“提交 ”按钮 时 会 出 现 如 图 7.12 所 示 的 “请 输入 网 址 ”的 提示 。 注 意 ，www.baidu.com 并 不 是 有 效 的 
| URL， 因 为 URL 必须 以 http:// 或 https:// 开 头 。 这 里 最 好 使 用 占 位 符 提示 访问 者 。 另 外 ， 还 可 以 在 该 
字段 下 面 的 解释 文本 中 指出 合法 的 格式 。 





D lccalhorttestihtmnl x 全 


© © localhost/testi html 


[lccalhoct/tect tml x No 人 





C © localhost/test) himl 
请 福 和 网址: 三 一 了 
| 


请 输入 网 址 ，www baxdu com ] 
要 交 


B 旧 请 名 和 网址 。 





7.11 url 类 型 的 input 元 素 示例 7.12 ”检测 到 不 是 有 效 的 url 地 址 
对 于 不 支持 type="url" 的 浏览 器 ， 将 会 以 type="text" 来 处 理 。 


7.2.3 ”定义 数字 框 








视频 讲解 | number 类 型 的 input 元 素 提 供用 于 输入 数值 的 文本 框 。 用 户 还 可 以 设 定 对 所 接收 的 数字 的 限制 ， 


| 包括 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 
| 会 提示 错误 信息 。 
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number 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 7.2 所 示 。 | 
表 7.2 number 类 型 的 属性 
| 

















规定 允许 的 最 大 值 | 
min | mnber 规定 允许 的 最 小 什 
step | mumber 规定 合法 的 数字 间隔 如 果 step="4"， 则 合法 的 数 是 4、0、4、8 等 ) | 
value | number 规定 默认 值 | 





【示例 】 下 面 是 number 类 型 的 一 个 应 用 示例 。 
<form action="demo form.php" method= "get"> 
请 输入 数值 : <input type="number" name="numberl" min="1" max="20" step="4"> 
<input type="submit" /> 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.13 所 示 。 如 果 输 入 了 不 在 限定 范围 之 内 的 数字 ， 
单 击 “ 提 交 ” 按 钮 时 会 出 现 如 图 7.14 所 示 的 提示 。 


Dm echorxhechin xx DY echorxnerihmn x 
© © localhost/testl html : © © localhost/test) himl 


请 边 入 壕 值 ; $4 [提交 请 衫 入 才 悄 ; | 汉 $ Es 


回 值 必须 小 于 或 符 于 20。 





7.13 number 类 型 的 input 元 素 示例 7.14 检测 到 输入 了 不 在 限定 范围 之 内 的 数字 


图 7.14 所 示 为 输入 了 大 于 规定 的 最 大 值 时 所 出 现 的 提示 。 同 样 的 ， 如 果 违 反 了 其 他 限定 ， 也 会 
出 现 相关 提示 。 例 如 ， 如 果 输 入 数值 15， 则 单 击 “提交 ”按钮 时 会 出 现 “ 值 无 效 ”的 提示 ， 如 图 7.15 
所 示 。 这 是 因为 限定 了 合法 的 数字 间隔 为 4， 在 输入 时 只 能 输入 4 的 倍数 ， 如 4、8、16 等 。 又 如 ， 
如 果 输入 数值 -12， 则 会 提示 “ 值 必须 大 于 或 等 于 1”， 如 图 7.16 所 示 。 





DY localhoss/tect html x Co D canhoxnerhn x No 
3 C © localhost/test html 女 | FC © localhos/tes html 
请 洽 入 铬 什 , [9 ”| [要 村 请 输入 热情 ， [全 “| [ 理 交 


加 清治 入 有 效 年。 两 个 最 弱 近 的 右 次 回 估 必 须 大 于 或 答 于 1。 
值 分 别 为 13 和 17。 ee 


图 7.15 出 现 “ 值 无 效 ”的 提示 图 7.16 提示 “ 值 必须 大 于 或 等 于 1” 


7.2.4 定义 范围 杠 


range 类 型 的 input 元 素 提供 用 于 输入 包含 一 定 范围 内 数字 值 的 文本 框 ， 在 网 页 中 显示 为 滑动 条 。 
用 户 可 以 设 定 对 所 接收 的 数字 的 限制 , 包括 规定 允许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 
如 果 所 输入 的 数字 不 在 限定 范围 之 内 ， 则 会 出 现 错误 提示 。 

range 类 型 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 ， 说 明 如 表 7.3 所 示 。 
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表 7.3 range 类 型 的 属性 














属 性 值 描述 
max | mber 规定 允许 的 最 大 值 
会 由 | min | water 规定 允许 的 最 小 值 
| step | mmber 规定 合法 的 数字 间隔 (如果 step="4", 则 合法 的 数 是 -4、0、4、8 等 ) 





value | nmumber 规定 默认 值 


| 从 表 7.3 可 以 看 出 ，range 类 型 的 属性 与 number 类 型 的 属性 相同 ， 这 两 种 类 型 的 不 同 在 于 外 观 表 
现 上 ， 支 持 range 类 型 的 浏览 器 都 会 将 其 显示 为 滑 块 的 形式 ， 而 不 支持 range 类 型 的 浏览 器 则 会 将 其 
显示 为 普通 的 文本 框 ， 即 以 type="text" 来 处 理 。 
【示例 】 下 面 是 range 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 输入 数值 : <input type="range" name="rangel1" min="1" max="30" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.17 所 示 。 range 类 型 的 input 元 素 在 不 同 浏览 器 中 
的 外 观 也 不 同 ， 例 如 在 Opera 浏览 器 中 的 外 观 如 图 7.18 所 示 ， 会 在 滑 块 下 方 显示 出 额外 的 数字 间隔 











7.17 range 类 型 的 input 元 素 示例 7.18 range 类 型 的 input 元 素 在 Opera 浏览 器 中 的 外 观 


7.2.5 ”定义 日 期 选择 器 


| 日 期 选择 器 (Date Pickers) 是 网 页 中 经 常 要 用 到 的 一 种 控件 ， 在 HTML5 之 前 版 本 中 并 没有 提供 
| 任何 形式 的 日 期 选择 器 控件 , 多 采用 一 些 JavaScript 框架 来 实现 日 期 选择 器 控件 的 功能 , 如 jQuery UI、 
| YUI 等 ， 在 具体 使 用 时 会 比较 麻烦 。 

HTMLS5 提供 了 多 个 可 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 即 6 种 日 期 选择 器 控件 ， 分 别 用 于 选择 
以 下 日 期 格式 : 日 期 、 月 、 星 期 、 时 间 、 日 期 + 时 间 、 日 期 + 时 间 + 时 区 ， 如 表 7.4 所 示 。 








表 7.4 日 期 选择 器 类 型 





HTML 代码 功能 与 说 明 



















date | <input type="date"> 选取 日 、 月 、 年 
month | <input type="month"> 选取 月 、 年 
week | <input type="week"> 选取 周 和 年 
| <input type="time"> 选取 时 间 (小 时 和 分 钟 ) 









选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 
选取 时 间 、 日 、 月 、 年 〈 本 地 时 间 ) 


<input type="datetime"> 


<input type="datetime-local"> 
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datetime-local 
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容 提示 :UTC 时 间 就 是 0 时 区 的 时 间 ， 而 本 地 时 间 就 是 本 地 时 区 的 时 间 。 例 如 ， 如 果 北京 时 间 为 
早上 8 点 ， 则 UTC 时 间 为 0 点， 也 就 是 说 ，UTC 时 间 比 北京 时 间 晚 8 小时。 


1. date 类 型 


date 类 型 的 日 期 选择 器 用 于 选取 日 、 月 、 年 ， 即 选择 一 个 具体 的 日 期 例如 2018 年 8 月 8 日 ， 
选择 后 会 以 2018-08-08 的 形式 显示 。 
【示例 1】 下 面 是 date 类 型 的 一 个 应 用 示例 。 | 
<form action="demo form.php" method="get"> | 
请 输入 日 期 <input type="date" name=" datel" 亡 | 
<input type="submit" /> 
</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.19 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 7.20 | 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 可 见 该 浏览 器 并 不 支持 日 期 选择 器 | 
控件 。 而 Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 日 期 。 
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图 7.19 在 Chrome 浏览 器 中 的 运行 结果 图 7.20 在 Opera 浏览 器 中 的 运行 结果 


2. month 类 型 


month 类 型 的 日 期 选择 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 ， 例 如 2018 年 8 月 ， 选 择 后 
会 以 2018-08 的 形式 显示 。 
【示例 2】 下 面 是 month 类 型 的 一 个 应 用 示例 。 
<form action="demo form.php" method="get"> 
请 输入 月 份 : <input type="month" name=" monthl" /> | 
<input type="submit" /> | 
</form> | 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.21 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 7.22 
所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 只 显示 到 月 份 ， 而 
不 会 显示 日 期 。Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具体 
月 份 ， 但 不 能 选择 具体 日 期 。 可 以 看 到 ， 整 个 月 份 中 的 日 期 都 会 以 深 灰色 显示 ， 单 击 该 区 域 可 以 选择 
整个 月 份 。 

3. week 类 型 


week 类 型 的 日 期 选择 器 用 于 选取 周 和 年 , 即 选择 一 个 具体 的 哪 一 周 , 例如 2017 年 10 月 第 42 周 ， 
选择 后 会 以 “2017 年 第 42 周 ” 的 形式 显示 。 
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7.21 在 Chrome 浏览 器 中 的 运行 结果 7.22 在 Opera 浏览 器 中 的 运行 结果 
【示例 3】 下 面 是 week 类 型 的 一 个 应 用 示例 。 

<form action="demo form.php" method="get"> 

请 选择 年 份 和 周 数 :<input type="week" name="week1" /> 

<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.23 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 7.24 
| 所 示 。Chrome 浏览 器 中 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 显示 年 份 和 周 数 ， 
| 而 不 会 显示 日 期 。Opera 浏览 器 中 单 击 右 侧 小 箭头 时 会 显示 出 日 期 控件 ， 用 户 可 以 使 用 控件 来 选择 具 
| 体 的 年 份 和 周 数 , 但 不 能 选择 具体 日 期 。 可 以 看 到 , 整个 月 份 中 的 日 期 都 会 以 深 灰 色 显示 按 周 数 显示 ， 
| 音 击 该 区 域 可 以 选择 某 一 周 。 
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7.23 在 Chrome 浏览 器 中 的 运行 结果 图 7.24 在 Opera 浏 览 器 中 的 运行 结果 


4. time 类 型 


time 类 型 的 日 期 选择 器 用 于 选取 时 间 , 具体 到 小 时 和 分 钟 , 例如 ,选择 后 会 以 22:59 的 形式 显示 。 
【示例 4】 下 面 是 time 类 型 的 一 个 应 用 示例 。 


<form action="demo form.php" method="get"> 

请 选择 或 输入 时 间 :。 <input type="time" name="timel" /> 
<input type="submit" /> 

</form> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.25 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 7.26 


。134 。 


第 7 章 设计 表单 一 

















[DY ecahorheskhim x 


C | © localhos/tesi4 hr 


请 旋 拉 于 葵 入 时间， 一 一 | 天 





图 7.25 在 Chrome 浏览 器 中 的 运行 结果 图 7.26 在 Opera 浏览 器 中 的 运行 结果 | 

除了 可 以 使 用 微调 按钮 之 外 , 还 可 以 直接 输入 时 间 值 。 如 果 输 入 了 错误 的 时 间 格 式 并 单 击 “ 提 交 ” | 
按钮 ， 则 在 Chrome 浏览 器 中 会 自动 更 正 为 最 接近 的 合法 值 ， 而 在 正 10 浏览 器 中 则 以 普通 的 文本 框 | 
显示 ， 如 图 7.27 所 示 。 | 
time 类 型 支持 使 用 一 些 属 性 来 限定 时 间 的 大 小 范围 或 合法 的 时 间 间 隔 ， 如 表 7.5 所 示 。 | 


表 7.5 time 类 型 的 属性 





【示例 5】 可 以 使 用 下 列 代 码 来 限定 时 间 。 

<form action="demo form.php" method="get"> 

请 选择 或 输入 时 间 : <input type="time" name="timel" step="5" value="09:00"> 
<input type="submit" /> 

</form> | 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.28 所 示 , 可 以 看 到 , 在 输入 框 中 出 现 设 置 的 默认 | 
值 “09:00”， 并 且 当 单 击 微调 按钮 时 ， 会 以 5 秒 钟 为 单位 递增 或 递减 。 当 然 ， 用 户 还 可 以 使 用 min 和 | 
max 属性 指定 时 间 的 范围 。 | 


© © localhost/tests html 


© [CHE Er 


一 | 
请 选择 惑 输入 时 间 ， [B2423 x 请 选 泽 式 给 和 时间，[09:00: 和 x 各 [ 闫 交 | | 
提 这 吉凶 内容 | 




















7.27 正 10 浏 览 器 不 支持 该 类 型 输入 框 7.28 ”使 用 属性 值 限定 时 间 类 型 | 

| 

在 date 类 型 、month 类 型 、week 类 型 中 也 支持 使 用 上 述 属性 值 。 | 
5. datetime 类 型 


datetime 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 UTC 时 间 。 
【示例 6】 下 面 是 datetime 类 型 的 一 个 应 用 示例 。 


<form action="demo form.php" method="get"> 


"195s 


Eee A 从 入 门 到 精通 ( 微 课 精 编 版 ) 


请 选择 或 输入 时 间 : <input type="datetime" name="datetimel" /> 


<input type="submit" /> 
</form> 
会 内 | 以 上 代码 在 Safari 浏览 器 中 的 运行 结果 如 图 7.29 所 示 。 








分 版 本 支持 。Opera 12 以 及 更 早 的 版 本 中 完全 支持 。 
6. datetime-local 类 型 
datetime-local 类 型 的 日 期 选择 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 本 地 时 间 。 
【示例 7】 下 面 是 datetime-local 类 型 的 一 个 应 用 示例 。 


<form action="demo_form.php" method="get"> 
请 选择 或 输入 时 间 : <input type="datetime-local" name="datetime-locall" /> 


<input type="submit" /> 

</form> 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.30 所 示 , 在 Opera 浏览 器 中 的 运行 结果 如 图 7.31 
所 示 。 
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| 

图 730 在 Chrome 浏览 器 中 的 运行 结果 图 731 在 Opera 浏览 器 中 的 运行 结果 


7.2.6 ”定义 搜索 框 


search 类 型 的 input 元 素 提供 用 于 输入 搜索 关键 词 的 文本 框 。 在 外 观 上 看 起 来 , search 类 型 的 input 
| 元 素 与 普通 的 text 类 型 的 区 别 : 当 输入 内 容 时 ， 右 侧 会 出 现 一 个 “X ”图 标 ， 单 击 即 可 清除 搜索 框 。 
| 【示例 】 下 面 是 search 类 型 的 一 个 应 用 示例 。 





| <form action="demo form.php" method="get"> 
| 请 输入 搜索 关键 词 : <input type="search" name="searchl" /> 
| <input type="submit" value="Go"/> 

</form> 
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以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.32 所 示 。 如 果 在 搜索 框 中 输入 要 搜索 的 关键 词 ， 
在 搜索 框 右 侧 就 会 出 现 一 个 “xX” 按钮 , 单 击 该 按钮 可 以 清除 已 经 输入 的 内 容 。 在 Windows 系统 中 ，| 
新 版 的 正 、Chrome、Opera 浏览 器 支持 “X ”按钮 这 一 功能 ，Firefox 浏览 器 则 不 支持 ， 如 图 7.33 | 
所 示 。 | 


DD localhostastlhemnl x localhosta080/mysitept XC 


© |@ localhost/testT htm| € 加 echostangolm 





请 窒 入 扫 索 关 链 词 ， [an 请 注入 按 寺 关键 记 : htm Loo | 





图 7.32 search 类 型 的 应 用 图 7.33 Firefox 浏览 器 中 没有 “X ”按钮 


窑 提示 : 在 默认 情况 下 ， 为 Chrome、Safari 和 Mobile Safari 等 浏览 器 中 的 搜索 框 设置 样式 是 受到 
限制 的 。 如 果 要 消除 这 一 约束 ， 重 新 获得 CSS 的 控制 权 ， 可 以 使 用 专 有 的 
-webkit-appearance: none; 声明 ， 例 如 : 
input[type= "search"] { | 

-webkit-appearance: none: | 
. | 
注意 ，appearance 属性 并 不 是 官方 的 CSS， 因 此 不 同 浏览 器 的 行为 有 可 能 不 一 样 . 更 多 信 | 
息 (包括 对 Firefox 的 支持 ) 可 以 参考 http://css-tricks.com/almanac/properties/a/appearance/。 


7.2.7 ”定义 电话 号 码 框 


| 

tel 类 型 的 input 元 素 提供 专门 用 于 输入 电话 号 码 的 文本 框 。 它 并 不 限定 只 输入 数字 ， 因 为 很 多 的 | 

电话 号 码 还 包括 其 他 字符 ， 如 “+”“-”“(”“)” 等 ， 例 如 86-0536-8888888。 | 

【示例 】 下 面 是 tel 类 型 的 一 个 应 用 示例 。 

<form action="demo_form.php" method="get"> | 

请 输入 电话 号 码 ; <input type="tel" name="tell" /> | 

<input type="submit" value=" 提 交 "/> | 

</form> | 

以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.34 所 示 。 从 某 种 程度 上 来 说 ,所 有 的 浏览 器 都 支 | 

持 tel 类 型 的 input 元 素 ， 因 为 它们 都 会 将 其 作为 一 个 普通 的 文本 框 来 显示 。HTMLS5 规则 并 不 需要 浏 
览 器 执行 任何 特定 的 电话 号 码 语法 或 以 任何 特别 的 方式 来 显示 电话 号 码 。 








D localbosthestihtml x 全 


© | © localhost/testl.html 会 | 下 


请 输入 电话 号 码 : 提交 





图 7.34 tel 类 型 的 应 用 
7.2.8 定义 拾 色 器 
color 类 型 的 input 元 素 提供 专门 用 于 选择 颜色 的 文本 框 。 当 color 类 型 文本 框 获取 焦点 后 ， 会 自 本 频 讲解 
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a A 


| 动 调用 系统 的 颜色 窗口 ， 包 括 苹果 系统 也 能 弹出 相应 的 系统 色 盘 。 
| 【示例 】 下 面 是 color 类 型 的 一 个 应 用 示例 。 
| <form action="demo form.php" method="get"> 
会 扩 | | 请 选择 一 种 颜色 : <input type="color" name="colorl" /> 
= 全 | <input type="submit" value=" 提 交 "/> 
</form> 


| 以 上 代码 在 Opera 浏览 器 中 的 运行 结果 如 图 7.35 所 示 ， 单 击 颜色 文本 框 ， 会 打开 Windows 系统 
| 中 的 “颜色 ”对 话 框 ， 如 图 7.36 所 示 ， 选 择 一 种 颜色 之 后 ， 单 击 “ 确 定 ” 按 钮 返回 网 页 ， 这 时 可 以 
| 看 到 颜色 文本 框 显示 对 应 颜色 效果 ， 如 图 7.37 所 示 。 


你 提示 :IE 和 Safari 浏览 器 暂 不 支持 该 控件 。 


WW localhostkesthtml x 


«> CC m | ocahosest him 











请 选择 一 种 亲 色 ，| 有 有] 到] 








图 7.35 color 类 型 的 应 用 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| , [| Ja] 














图 7.37 设置 颜色 后 效果 


7.3 设置 输入 框 属性 





HTML5 为 input 元素 新 增 了 多 个 属性 ， 用 于 限制 输入 行为 或 格式 。 
7.3.1 定义 自动 完成 


autocomplete 属性 可 以 帮助 用 户 在 输入 框 中 实现 自动 完成 输入 , 取 值 包括 on 和 off, 用 法 如 下 所 示 。 
<input type="email" name="email" autocomplete="off" /> 





视频 讲解 
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七 
安 提示 : autocomplete 属性 适用 input 类 型 包括 : text、search、url、telephone、email、password、 
datepickers、range 和 color. 
autocomplete 属性 也 适用 于 form 元 素 ,默认 状态 下 表单 的 autocomplete 属性 处 于 打开 状态 ， 
其 包含 的 输入 域 会 自动 继承 autocomplete 状 态 ,也 可 以 为 菜 个 输入 域 单独 设置 autocomplete 
状态 。 | 
< 注意 : 在 某 些 浏览 器 中 需要 先 启用 浏览 器 本 身 的 自动 完成 功能 , 才能 使 autocomplete 属性 起 作用 。 | 


| 

【示例 】 设 置 autocomplete 为 “on” 时 ， 可 以 使 用 HIMLS 新 增 的 datalist 元 素 和 list 属性 提供 一 | 
个 数据 列表 供用 户 进行 选择 。 下 面 示例 演示 如 何 应 用 autocomplete 属性 、datalist 元 素 和 list 属性 实现 | 
自动 完成 。 | 








<h2> 输 入 你 最 喜欢 的 城市 名 称 </h2> | 
<form autocompelete="on"> | 
<input type="text" id="city" list="cityList"> | 
<datalist id="cityList" style="display:none:"> 
<option value="Beiling">BeiJing</option> 
<option value="QingDao">QingDao</option> 
<option value="QingZhou">QingZhou</option> 
<option value="QingHai">QingHai</option> 
</datalist> 
</form> 


在 浏览 器 中 预览 ， 当 用 户 将 焦点 定位 到 文本 框 中 ， 会 自动 出 现 一 个 城市 列表 供用 户 选择 ， 如 | 
图 7.38 所 示 。 而 当 用 户 单 击 页 面 的 其 他 位 置 时 ， 这 个 列表 就 会 消失 。 | 

当 用 户 输入 时 ， 该 列表 会 随 用 户 的 输入 自动 更 新 。 例 如 ， 当 输入 字母 q 时 会 自动 更 新 列表 , 只 | 
列 出 以 q 开头 的 城市 名 称 ， 如 图 7.39 所 示 。 随 着 用 户 不 断 地 输入 新 的 字母 ， 下 面 的 列表 还 会 随 之 变化 。 | 





D Icehoxuetzhmn x Ne 


© [© localnost/testz html 位 © © localhost/test2 heml 


: | 
| 

输入 你 最 喜欢 的 城市 名 称 输入 你 最 喜欢 的 城市 名 称 | 
| 





图 7.38 自动 完成 数据 列表 图 7.39 数据 列表 随 用 户 输入 而 更 新 


交 提示 : 多 数 浏览 器 都 带 有 辅助 用 户 完成 输入 的 自动 完成 功能 ， 只 要 开启 了 该 功能 , 浏览 器 会 自动 
记录 用 户 所 输入 的 信息 ， 当 再 次 输入 相同 的 内 容 时 ， 浏 览 器 就 会 自动 完成 内 容 的 输入 . 从 
安全 性 和 隐私 的 角度 考虑 ,这 个 功能 存在 较 大 的 隐患 ， 如 果 不 希 望 浏览 器 自动 记录 这 些 信 | 
息 ， 则 可 以 为 form 或 form 中 的 input 元 素 设置 autocomplete 属性 ， 关 闭 该 功能 。 | 


>| 


7.3.2 ”定义 自动 获取 焦点 
autofocus 属性 可 以 实现 在 页 面 加 载 时 ， 让 表单 控件 自动 获得 焦点 。 用 法 如 下 所 示 。 
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Eee A 


<input type="text" name="fhame" autofocus="autofocus" /> 
autocomplete 属性 适用 于 所 有 <input> 标 签 的 类 型 ， 如 文本 框 、 复 选 框 、 单 选 按钮 、 普通 按钮 等 。 


会 内 4 注意 : 在 同一 页 面 中 只 能 指定 一 个 autofocus 对 象 ， 当 页 面 中 的 表单 控件 比较 多 时 ， 建 议 为 最 需 
A 要 聚焦 的 那个 控件 设置 autofocus 属性 值 ， 如 页 面 中 搜索 文本 框 ， 或 者 许可 协议 的 “同意 ” 


和 


| 【示例 1】 下 面 示例 演示 如 何 应 用 autofocus 属性 。 


<form> 
| <p> 请 仔细 阅读 许可 协议 ,</p> 
| <p> 
| 
| <label for="textareal"></label> 
| <textarea name="textareal" id="textareal" cols="45" rows="5"> 许 可 协议 具体 内 容 .…..</textarea> 
| <p> 
| < 
<input type="submit" value=" 同 意 " autofocus> 
| <input type="submit" value=" 拒 绝 "> 
| </p> 
| 


| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.40 所 示 。 页 面 载 入 后 ,“ 同 意 ”按钮 自动 获得 焦 
| 点 ， 因 为 通常 希望 用 户 直接 单 击 该 按钮 。 如 果 将 “拒绝 ”按钮 的 autofocus 属性 值 设置 为 “on”， 则 页 
| 面 载 入 后 焦点 就 会 在 “拒绝 ”按钮 上 ， 如 图 7.41 所 示 ， 但 从 页 面 功用 的 角度 来 说 却 并 不 合适 。 


x 三 
D localhost/test htrml x Ne D lccalhowtesti html x 二 下 
© | © localhost/test] himl 全 | : © © localhost/test] html 3 


请 仔细 阅读 许可 协议 ， 请 仔细 阅读 许可 协议 ， 


| 
| 
| 
| 
| 
| 
| 证 可 而 区 肌体 内 看 -… 到 可 肌 沁 体内 下 
| 

| 

| 


[EE] #8] 





7.40 “同意 ”按钮 自动 获得 焦点 图 7.41 “拒绝 ”按钮 自动 获得 焦点 
| 【示例 2】 如 果 浏 览 器 不 支持 autofocus 属性 ， 可 以 使 用 JavaScript 实现 相同 的 功能 。 在 下 面 脚本 
| 中 ， 先 检测 浏览 器 是 否 支 持 autofocus 属性 ， 如 果 不 支 持 则 获取 指定 的 表单 域 ， 为 其 调用 focus0 方 法 ， 
| 强迫 其 获取 焦点 。 


| if(!("autofocus" in document.createElement("input"))) { 
| document.getElementById("ok").focusO: 
| 


| 7.3.3 ”定义 所 属 表单 
form 属性 可 以 设置 表单 控件 归属 的 表单 ， 适 用 于 所 有 <input> 标 签 的 类 型 。 
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次 提示 : 在 HTML4 中 ， 用 户 必须 把 相关 的 控件 放 在 表单 内 部 ， 即 <form> 和 </form> 之 间 。 在 提交 | 
表单 时 ， 在 <form> 和 </form> 之 外 的 控件 将 被 忽略 . | 

| 


【示例 】form 属性 必须 引用 所 属 表 单 的 这， 如果 一 个 form 属性 要 引用 两 个 或 两 个 以 上 的 表单 ， | 会 内 
则 需要 使 用 空格 将 表单 的 这 值 分 隔 开 。 下 面 是 一 个 form 属性 应 用 。 | 入 
<form action="" method="get" id="form1"> 
请 输入 姓名 : <input type="text" name="name1" autofocus/> | 
<input type="submit” value=" 提 交 "/> | 
</form> 
请 输入 住址 : <input type="text" name="address1" form="form1" /> 


以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.42 所 示 。 如 果 填 写 姓 名 和 住址 并 单 击 “ 提 交 ” 按 
钮 ， 则 namel 和 addressl 分 别 会 被 赋值 为 所 填写 的 值 。 例 如 ， 如 果 在 姓名 处 填写 “zhangsan”， 住 址 | 
处 填写 “北京 ”， 则 单 击 “ 提 交 ” 按 钮 后 ， 服 务 器 端 会 接收 到 “name1=zhangsan” 和 “address1= 北 京 ”。 | 


用 户 也 可 以 在 提交 后 观察 浏览 器 的 地 址 栏 ， 可 以 看 到 有 “name1=zhangsan&address1= 北 京 ” 字 样 ， 如 | 
图 7.43 所 示 。 | 








[Dlocalhocns0g0/myste, x No D localhosta0e0/mysite, x NW 
© ©localhost3080/mysite/te.. 入: € > C0 0PM i : 


请 输入 姓名 ; zhangsan 提交 | 请 宾 入 姓名 





| 
| 

| 

| 

| 

| 

| 

请 输入 住址 :Etm ] 请 输入 住址 | 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


7.42 form 属性 的 应 用 图 7.43 地址 中 要 提交 的 数据 


7.3.4 定义 表单 重 写 


HTML5 新 增 5 个 表单 重 写 属性 ， 用 于 重 写 <form> 标 签 属性 设置 ， 简 单 说 明 如 下 : 
formaction: 重 写 <form> 标 签 的 action 属性 。 
formenctype: 重 写 <form> 标 签 的 enctype 属性 。 
formmethod: 重 写 <form> 标 签 的 method 属性 。 | 
formnovalidate: 重 写 <form> 标 签 的 novalidate 属性 。 | 
formtarget: 重 写 <form> 标 签 的 target 属性 。 | 
< 注意 : 表单 重 写 属性 仅 适用 于 submit 和 image 类 型 的 input 元 素 。 
【示例 】 下 面 示例 设计 通过 formaction 属性 ， 实 现 将 表单 提交 到 不 同 的 服务 器 页 面 。 
<form action="1.asp" id="testform"> 
请 输入 电子 邮件 地 址 : <input type="email" name="userid" /><br /> 
<input type="submit" value=" 提 交 到 页 面 1" formaction="1.asp" /> 
<input type="submit" value=" 提 交 到 页 面 2" formaction="2.asp" /> 
<input type="submit" value=" 提 交 到 页 面 3" formaction="3.asp" /> 
</form> 





回回 罗 回回 
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7.3.5 “定义 高 和 宽 


height 和 width 属性 仅 用 于 设置 <input type="image"> 标 签 的 图 像 高 度 和 宽度 。 

【示例 】 下 面 示例 演示 了 height 与 width 属性 的 应 用 。 
<form action="testform.asp" method="get"> 
请 输入 用 户 名 : <input type="text" name="user name" /><br /> 
<input type="image" src="images/submit.png" width="72" height="26" /> 
| </form> 

原 图 像 的 大 小 为 288X 104 像素 ， 使 用 以 上 代码 将 其 大 小 限制 为 72X267 像素 ， 在 Chrome 浏览 

器 中 的 运行 结果 如 图 7.44 所 示 。 








图 7.44 form 属性 的 应 用 


7.3.6 ”定义 列表 选项 
| list 属 性 用 于 设置 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 , 该 属性 适用 于 以 下 类 型 的 <input> 


| 标签 : text、search、url、telephone、email、date pickers、number、range 和 color。 
演示 示例 可 参考 7.4 节 datalist 元 素 介绍 。 


| < 全 注意 : 目前 最 新 的 主流 浏览 器 都 已 支持 list 属性 ， 不 过 呈现 形式 略 有 不 同 。 


7.3.7 ”定义 最 小 值 、 最 大 值 和 步 长 


min、max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 输入 类 型 设置 限 值 ， 适 用 于 date pickers、 
| number 和 range 类 型 的 <input> 标 签 。 具 体 说 明 如 下 。 
回 ”max 属性 : 设置 输入 框 所 允许 的 最 大 值 。 
min 属性 : 设置 输入 框 所 允许 的 最 小 值 。 
step 属性 : 为 输入 框 设 置 合法 的 数字 间隔 〈 步 长 ) 。 例 如 ，step="4"， 则 合法 值 包括 -4、0、 
4 等 。 
【示例 】 下 面 示例 设计 一 个 数字 输入 框 ， 并 规定 该 输入 框 接收 介 于 0 到 12 之 间 的 值 ， 且 数字 间 
隔 为 4。 
<form action="testform.asp" method="get"> 
请 输入 数值 ， <input type="number" name="numberl" min="0" max="12" step="4" /> 
<input type="submit" value=" 提 交 " /> 
</form> 
在 Chrome 浏览 器 中 运行 时 ， 如 果 单 击 数字 输入 框 右 侧 的 微调 按钮 ， 则 可 以 看 到 数字 以 4 为 步 
进 值 递增 ， 如 图 7.45 所 示 ; 如 果 输 入 不 合法 的 数值 ， 如 5， 单 击 “ 提 交 ” 按 钮 时 会 显示 错误 提示 ， 
如 图 7.46 所 示 。 
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© | © localhosest himl 女 | 5 


请 注入 埃 年， 下 [ 坟 革 | 


请 箱 入 效 值 ， [可 纹 [ 概 交 ] 9 i 两 个 最 接近 的 有 效 
鸽 分 列 为 4 和 8 





图 7.45 list 属 性 应 用 图 7.46 显示 错误 提示 


7.3.8 定义 多 选 


multiple 属性 可 以 设置 输入 域 一 次 选择 多 个 值 ， 适 用 于 email 和 file 类 型 的 <input> 标 签 。 
【示例 】 下 面 在 页 面 中 插入 了 一 个 文件 域 ， 使 用 multiple 属性 允许 用 户 一 次 可 提交 多 个 文件 。 | 
<form action="testform.asp" method="get"> 
请 选择 要 上 传 的 多 个 文件 : i name="img" multiple /> 
<input type=' i 
</form> 
在 Chrome 浏览 器 中 的 运行 结果 如 图 7.47 所 示 。 如 果 单 击 “ 选 择 文件 ”按钮 ， 则 会 允许 在 打开 的 
对 话 框 中 选择 多 个 文件 。 选 择 文件 并 单 击 “ 打 开 ” 按 钮 后 会 关闭 对 话 框 ， 同 时 在 页 面 中 会 显示 选中 
件 的 个 数 ， 如 图 7.48 所 示 。 





冯 于 


Decahoxnetinn xx > 
© Diocahowiestihiml 女 ] E 


六 上 传 的 多 个 文 性 : 
安 牟 ”于 反 任何 立 件 [E53 


D lecolhost/testihtml x N= 

© © locahost/test] hunl pa 

请 选择 要 上 传 的 多 个 文件: 
过 得 件 ] 4 个 文件 


国 到 





图 7.47 multiple 属性 的 应 用 7.48 ”显示 被 选中 文件 的 个 数 


7.3.9 定义 匹配 模式 
pattern 属性 规定 用 于 验证 input 域 的 模式 〈pattern )。 模 式 就 是 JavaScript 正则 表达 式 ， 通 过 自 定 ;视频 讲解 


义 的 正则 表达 式 匹配 用 户 输入 的 内 容 ， 以 便 进 行 验证 。 该 属性 适用 于 text、search、url、telephone、 | 
email 和 password 类 型 的 <input> 标 签 。 


浴 提示 : 读者 可 以 在 http:/html5pattem.com 上 面 找到 一 些 常用 的 正则 表达 式 ， 并 将 它们 复制 、 粘 贴 
到 自己 的 pattem 属性 中 进行 应 用 。 
【示例 】 下 面 示例 使 用 pattem 属性 设置 文本 框 必须 输入 6 位 数 的 邮政 编码 。 


<form action="/testform.asp" method="get"> 
请 输入 邮政 编码 : <input type="text" name="zip_code" pattern="[0-9]{6}" 
tile=" 请 输入 6 位 数 的 邮政 编码 " /> 








<input type="submit" value=" 提 交 " /> 
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之 yo A wm 和 有 汉 糙 通 ( 拔 名 本 二 到 ) 
| 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.49 所 示 。 如 果 输 入 的 数字 不 是 6 位 ， 则 会 出 现 错误 提示 ， 
| 如 图 7.50 所 示 。 如 果 输 入 的 并 非 规定 的 数字 ， 而 是 字母 ， 也 会 出 现 这 样 的 错误 提示 ， 因 为 
| pattem="[0-9]{6}" 中 规定 了 必须 输入 0 一 9 这 样 的 阿拉 伯 数 字 ， 并 且 必 须 为 6 位 数 。 

| E DD locelhostftestihtml x 


@ [Oromomesihml 。。 女 | 3 


诸 给 入 凶 政 编码 : MH Es 


D eroxernn xx 
© Oocanosenhml 文 上 
请 深入 印 收编 m:[T ] 
3 
加 再 与 和 丙 寂 9 格式 保持 一 至。 
| 








图 7.49 pattem 属性 的 应 用 图 7.50 出现 错误 提示 


7.3.10 ”定义 替换 文本 


placeholder 属性 用 于 为 input 类 型 的 输入 框 提供 一 种 文本 提示 ， 这 些 提示 可 以 描述 输入 框 期 待 用 
户 输入 的 内 容 , 在 输入 框 为 空 时 显示 , 而 当 输 入 框 获 取 焦 点 时 自动 消失 。placeholder 属性 适用 于 text、 
search、url、telephone、email 和 password 类 型 的 <input> 标 签 。 
| 【示例 】 下 面 是 placeholder 属性 的 一 个 应 用 示例 。 请 注意 比较 本 例 与 7.3.9 节 示例 提示 方法 的 
| 不 同 。 
<form action="/testform.asp" method="get"> 
请 输入 邮政 编码 : 
<input type="text" name="zip_code" pattem="[0-9]{6}” 
Placeholder- "请 输入 6 位 数 的 邮政 编码 " /> 
<input type="submit" value=" 提 交 " /> 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.51 所 示 。 当 输入 框 获 得 焦点 并 输入 字符 时 ,提示 
| 文字 消失 ， 如 图 7.52 所 示 。 


D localhosttest! hie x WE 
CC ©localhostestihiml 安 计 


A 天 一 一 


Decalhosttest hee x 
C | © localhosvrestiniml 安 | 3 


请 输入 邮政 编码 : 证 
局 





图 7.51 placeholder 属性 的 应 用 7.52 ”提示 消失 


7.3.11 定义 必 填 


视频 讲解 | required 属性 用 于 定义 输入 框 填写 的 内 容 不 能 为 空 ， 否 则 不 允许 提交 表单 。 该 属性 适用 于 text、 
search、 url、, telephone、 email、 password、date pickers、number、checkbox、radio 和 file 类 型 的 <input> 
标签 。 

【示例 】 下 面 示例 使 用 required 属性 规定 文本 框 必须 输入 内 容 。 
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<form action="/testform.asp" method="get"> 
请 输入 姓名 : <input type="text" name="usr name" required="required" /> | 
<input type="submit" value=" 提 交 " /> | 
</form> | 
在 Chrome 浏览 器 中 的 运行 结果 如 图 7.53 所 示 。 当 输入 框 内 容 为 空 并 单 击 “ 提 交 ” 按 钮 时 , 会 出 | 
现 “ 请 填写 此 字段 ”的 提示 ， 只 有 输入 内 容 之 后 才 允 许 提交 表单 。 | 





图 7.53 提示 “请 填写 此 字段 ” 
7.4 使 用 新 表单 对 象 


HITMLS 新 增 3 个 表单 元 素 : datalist、keygen 和 output， 下 面 分 别 进行 说 明 。 
7.4.1 定义 数据 列表 


datalist 元 素 用 于 为 输入 框 提供 一 个 可 选 的 列表 , 供用 户 输入 匹配 或 直接 选择 。 如 果 不 想 从 列表 中 
选择 ， 也 可 以 自行 输入 内 容 。 
datalist 元 素 需 要 与 option 元 素 配 合 使 用 ,每 个 option 选项 都 必须 设置 value 属性 值 。 其 中 <datalist> 
标签 用 于 定义 列表 框 , <option> 标 签 用 于 定义 列表 项 。 如 果 要 把 datalist 提供 的 列表 绑 定 到 某 输入 框 上 ， 
还 需要 使 用 输入 框 的 list 属性 来 引用 datalist 元 素 的 id。 
【示例 】 下 面 示例 演示 了 datalist 元 素 和 list 属性 如 何 配 合 使 用 。 
<form action="testform.asp" method="get"> 
请 输入 网 址 ，<input type="urlv list="url list" name="weblink" /> 
<datalist id="url list"> 
<option label=" 新 浪 " value="http://www.sina.com.cn" /> 
<option label=" 搜 狐 " value="http://www.sohu.com" /> | 
<option label=" 网 易 " value="http://www.163.com" /> | 
</datalist> | 
<input type="submit" value" 提 交 " /> 
< 
在 Chrome 浏览 器 中 运行 时 ， 当 用 户 单 击 re 
输入 框 之 后 ， 就 会 弹出 一 个 下 拉 网 址 列表 ， 供 © [@ iocahos/testi htm |] 
用 户 选 择 ， 效 果 如 图 7.54 所 示 。 清和 和 [| [| 





httpy/wwwsina comucn ”也 


ttpy/wwwsohfom 。 
httpy/www 163.com Rs 





图 7.54 list 属性 应 用 
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| 7.4.2 定义 密 钥 对 生成 器 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 
| 作为 密 钥 对 生成 器 , 当 提交 表单 时 ,keygen 元 素 会 生成 两 个 键 : 私 铀 和 公 钥 。 私 钥 存储 于 客户 端 ; 
| 公 钥 被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 
目前 ， 浏 览 器 对 该 元 素 的 支持 不 是 很 理想 。 
【示例 】 下 面 是 keygen 属性 的 一 个 应 用 示例 。 
<form action="/testform.asp" method="get"> 
请 输入 用 户 名 : <input type="text" name="usr name" /><br> 
请 选择 加 密 强 度 : <keygen name="security" /><br> 
<input type="submit" value=" 提 交 " /> 
</form> 
以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.55 所 示 。 在 “请 选择 加 密 强 度 ” 右 侧 的 keygen 
| 元素 中 可 以 选择 一 种 密 钥 强度 ， 有 2048 高 强度 ) 和 1024 (中 等 强度 ) 两 种 ， 在 Firefox 浏览 器 中 也 
| 提供 两 个 选项 ， 如 图 7.56 所 示 。 





hapyHL-tLhtml Xe 


| 

| 

| DY localhost/testl hi x We 

| CO oanomvesnnm 文 | 
| 


请 输入 用 户 名 ， 

请 过 皇 加 市 应 : [ODSWET | 

| ie 
re 





7.55 ”Chrome 浏览 器 提供 的 密 钥 等 级 7.56 ”Firefox 浏览 器 提供 的 密 钥 等 级 


7.4.3 ”定义 输出 结果 
output 元 素 用 于 在 浏览 器 中 显示 计算 结果 或 脚本 输出 ， 其 语法 如 下 。 





<output name="">Text</output> 
| 【示例 】 下 面 是 output 元 素 的 一 个 应 用 示例 。 该 示例 计算 用 户 输入 的 两 个 数字 的 乘积 。 
| ‘<script type="text/javascript"> 
| function multiO{ 


a=parseInt(prompt(" 请 输入 第 1 个 数字 。".0)): 
b=parseInt(prompt(" 请 输入 第 2 个 数字 。".0)): 
document.forms["form"]["result"].value=a*b:; 
} 
</script> 
<body onload="multiO"> 
<form action="testform.asp" method="get" name="form"> 
两 数 的 乘积 为 : <output name="result"></output> 
| </form> 
| ody> 
| 
| 以 上 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7.57 和 图 7.58 所 示 。 当 页 面 载 入 时 ， 会 首先 提示 
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“请 输入 第 1 个 数字 ”， 输 入 并 单 击 “ 确 定 ” 按 钮 后 再 根据 提示 输入 第 2 个 数字 。 再 次 单 击 “确定 ” 
按钮 后 ， 显 示 计 算 结果 ， 如 图 7.59 所 示 。 














四 -= 四 -= 
J oahasyearhml x teaboresthe x me 
x [Diocahosiestihml | X [© ecanosrrestn himl 女 
localhost 显示 : 时 localhost 号 示 : a 
1 N21 
到 到 | 
和 ree | 
过][ 可 二 - -二 
图 7.57 提示 输入 第 1 个 数字 图 7.58 提示 输入 第 2 个 数字 


© © IocalhostresrLntml 


两 歼 的 冬 积 为 : 1836 





图 7.59 显示 计算 结果 
7.5 设置 表单 属性 


HTML5 为 form 元 素 新 增 了 两 个 属性 : autocomplete 和 novalidate， 下 面 分 别 进行 说 明 。 
7.5.1 定义 自动 完成 : 
autocomplete 属性 用 于 规定 form 中 所 有 元 素 都 拥有 自动 完成 功能 。 该 属性 在 介绍 input 属性 时 已 视频 讲 但 


经 介绍 过 ， 用 法 与 之 相同 。 | 

但 是 当 autocomplete 属性 用 于 整个 form 时 ， 所 有 从 属于 该 form 的 控件 都 具备 自动 完成 功能 。 如 | 
果 要 关闭 部 分 控件 的 自动 完成 功能 , 则 需要 单独 设置 autocomplete="off', 具体 示例 可 参考 autocomplete | 
属性 的 介绍 。 | 


7.5.2 ”定义 禁止 验证 


novalidate 属性 规定 在 提交 表单 时 不 应 该 验证 form 或 input 域 。 适 用 于 <form> 标 签 ， 以 及 text、 
search、url、telephone、email、password、date pickers、range 和 color 类 型 的 <input> 标 签 。 
【示例 1】 下 面 示例 使 用 novalidate 属性 取消 了 整个 表单 的 验证 。 | 
<form action="testform.asp" method="get" novalidate> 
请 输入 电子 邮件 地 址 : <input type="email" name="user_email" /> | 
<input type="submit" value=" 提 交 " /> 
</form> 
【补充 】 
HTML5 为 form、input、select 和 textarea 元 素 定 义 了 一 个 checkValidity0 方 法 。 调 用 该 方法 ， 可 
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| 以 显 式 地 对 表单 内 所 有 元 素 内 容 或 单个 元 素 内 容 进行 有 效 性 验证 。checkValidity0 方 法 将 返回 布尔 值 ， 
| 以 提示 是 否 通 过 验证 。 
| 【示例 2】 下 面 示例 使 用 checkValidity0 方 法 ， 主 动 验证 用 户 输入 的 Email 地 址 是 否 有 效 。 
食 生 | <script> 
| function checkO{ 
Var email = document.getElementById("email"): 
| if(email.value—""){ 
| alert(" 请 输入 Email 地 址 "): 
| Tetum false; 


} 

| else if(!email.checkValidityO){ 

| alert(" 请 输入 正确 的 Email 地 址 "); 
| Teturn false; 


alert(" 您 输入 的 Email 地 址 有 效 "): 


<form id=testform onsubmit="return check0:" novalidate> 
<label for=email>Email</label> 
<input name=email id=email type=email /><br/> 
<input type=submit> 


安 提示 : 在 HTML5 中 ,form 和 input 元 素 都 有 一 个 validity 属性 ， 该 属性 返回 一 个 ValidityState 对 


象 。 该 对 象 具有 很 多 属性 ， 其 中 最 简单 、 最 重要 的 属性 为 valid 属性 ， 它 表示 表单 内 所 有 
元 素 内 容 是 否 有 效 或 单个 input 元 素 内 容 是 否 有 效 。 


7.6 在 线 练 习 
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综合 演练 : 设计 网 站 结构 


本 章 主要 通过 一 个 博客 网 站 的 制作 ， 展 示 如 何 合理 运用 HIMLS 中 各 种 结构 元 素 搭建 一 个 
语义 清晰 、 结 构 分 明 的 网 站 。 由 于 本 章 所 涉及 的 内 容 比较 多 ， 因 此 仅 对 主要 结构 和 设计 思路 进 
行 介绍 ， 详 细 内 容 以 源 代码 为 准 


【学 习 要 点 】 
出 ”熟悉 HTMLS 网 站 搭建 流程 
MH 正确 使 用 HTML5 结构 标签 


A 





8.1 准备 工作 


ea 掌握 了 HTMLS 的 文档 结构 、 结 构 元 素 ， 以 及 大 岗 的 生成 原则 之 后 ， 读 者 就 可 以 学 习 如 何 使 用 这 
些 基础 知识 来 搭建 一 个 语义 清晰 、 结 构 分 明 的 HTMLS 网 站 了 。 
”本 例 主要 演示 了 一 个 使 用 HTML5 中 的 各 种 结构 元 素来 构建 博客 网 站 ,各 在 通过 该 案例 帮助 读者 
” 触 类 旁 通 ， 充 分 了 解 HTMLS 中 的 各 种 结构 元 素 的 作用 、 使 用 场合 ， 以 及 使 用 方法 ， 从 而 构建 出 与 之 
| 相 类 似 的 、 结 构 分 明 的 、 语 义 清晰 的 HTML5 网 站 。 
在 学 习 本 章 案例 之 前 ， 读 者 需要 先 部 悉 HTMLS 网 页 结构 、HTMLS 新 增 的 结构 元 素 ， 这 些 结构 
元 素 的 作用 与 使 用 场合 是 什么 ，HTMLS 中 的 网 页 大 纲 是 什么 ， 这 些 结构 元 素 会 在 网 页 大 岗 的 生成 过 
程 中 起 到 什么 样 的 作用 ， 一 份 网 页 大 纲 是 根据 什么 原则 生成 的 。 详 细 讲 解 可 以 参考 第 2 章 内 容 。 


8.2 设计 首页 


| 本 节 重 点 介绍 首页 的 设计 过 程 ， 以 及 代码 实现 。 
| 8.2.1 首页 分 析 
下 面 先 来 看 一 下 本 例 博客 首页 在 浏览 器 中 的 显示 效果 ， 如 图 8.1 所 示 。 





人 


HTML5 中 新 博 number 素 的 ValueAsNumber 员 性 局 


半点 二 计 世 榨 林 ， 才 第 三 人 元 


ES 





| 人 在 HTML5 中 新 增 的 日 期 及 时 间 元 案 中 使 用 step 属 性 @ = :sa 

| 图 8.1 博客 首页 

首页 主要 分 为 4 个 部 分 : 第 一 部 分 为 网 页 标题 部 分 , 显示 该 博客 网 站 的 网 站 标题 与 网 站 导航 链接 ; 
| 第 二 部 分 为 网 页 侧 边栏 ， 显 示 博 主 自我 介绍 内 容 、 博 客 中 文章 的 所 有 分 类 链接 ， 以 及 网 友 对 博客 中 文 
章 的 最 新 评论 ; 第 三 部 分 为 由 博客 中 文章 摘要 组 成 的 文章 列表 ， 即 该 博客 首页 中 的 主要 内 容 ; 第 四 部 
分 为 页 面 底部 的 版 权 信息 显示 部 分 。 该 页 面 的 主体 结构 如 图 8.2 所 示 。 
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在 http://gsnedders.html5.org/outliner/ 页 面 在 线 提交 本 示例 文档 ， 梳 理 文档 的 层次 结构 ， 则 形成 如 
图 8.3 所 示 的 大 网。 


1. HTML5+CSS3+JavaScript 从 入 门 到 精通 
1. Untitled Section 
2. Untitled Section 





网 页 标题 部 分 : <header id="bloghead"> 








网 页 侧 


Untitled Section 


边栏 : 博客 文章 摘要 列表 : 


<aside> <section> 


Untitled Section 





LS 中 新 增 number 元 素 的 ValueAsNumber 局 性 
HTML5 中 新 增 的 日 期 及 时 间 元 素 中 使 用 step 属 性 


版 权 信息 显示 部 分 : <footer id="blogfooter'> 和 和 和 datetime 元 与 datebime ec 天 用 在 Web 生 
图 8.2 博客 首页 的 结构 图 图 8.3 博客 首页 生成 的 大 纲 | 
接 下 来 将 详细 介绍 如 何在 首页 中 使 用 各 种 结构 元 素来 搭建 整体 网 页 结构 , 以 及 在 大 纲 中 为 什么 会 | 
| 
| 








有 几 个 说 明 为 “Untitled Section” 的 节 ， 出 现 这 样 的 节 是 否 是 正常 的 、 合 理 的 。 
8.2.2 ”构建 网 页 标题 


首先 来 看 一 下 首页 中 用 来 显示 网 站 标题 与 网 站 导航 的 网 页 标题 部 分 ， 该 部 分 的 页 面 显 示 效 果 
如 图 8.4 所 示 。 





HTMLS+CSS3+JavaScript 从 入 门 到 精通 





8.4 博客 首页 标题 部 分 效果 图 


根据 第 2 章 所 学 知识 ，header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 
面 或 页 面 内 的 一 个 article 元 素 或 section 元 素 的 标题 。 在 博客 首页 中 ， 一 般 将 博客 的 标题 与 整个 网 站 
的 导航 链接 作为 整体 网 页 的 标题 放置 在 header 元 素 中 。 
另外 ， 在 header 元 素 内 部 使 用 了 一 个 nav 元 素 。 如 前 所 述 ，nav 元 素 是 一 个 可 以 作为 页 面 导航 的 
链接 组 ， 其 中 的 导航 元 素 链接 到 其 他 页 面 , 或 者 当前 页 面 的 其 他 部 分 ， 这 里 将 整个 网 站 的 导航 链接 放 
在 该 nav 元 素 中 。 该 部 分 的 结构 代码 如 下 所 示 。 
<header id="bloghead"> 
<div id="blogTitle"> 
<hl id="blogname">HTML5+CSS3+JavaScript 从 入 门 到 精通 </h1> 
<div id="bloglink">http://mysite.com/index.html</div> 
<ldiv> | 
<nav id="blognav"> | 
<ul id="blognavInfo"> | 
<li><a href="http://mysite.com/index.html" id="on"> 首 页 </a></li> 
<li><a hre 人 "http:/mysite .comylisthtml"> 博 文 目录 </a></i> 
</ul> 
</nav> 
</header> 


-ls 


& A 


| 
| 由 于 该 网 页 使 用 了 一 个 header 元 素来 显示 网 页 标题 ， 并 且 在 header 元 素 的 内 部 使 用 了 hl 元 素 ， 
| 元 素 中 的 文字 为 “HTML5+CSS3+JavaScript 从 入 门 到 精通 ”， 因 此 整个 大 纲 的 标题 为 “1. 
| HTML5+CSS3+JavaScript 从 入 门 到 精通 ”。 
僵 生 | 在 header 元 素 内 部 ， 使 用 nav 元 素来 显示 整个 网 站 的 导航 链接 ， 并 且 没 有 给 nav 元 素 添加 标题 ， 
在 HTML 5 中 , 并 不 强求 对 nav 元 素 添加 标题 , 所 以 这 个 没有 标题 的 nav 元 素 在 大 纲 中 生成 标题 为 “1. 
Note Untitled Section ”的 节 。 
| 在 上 面 这 段 代 码 中 ， 整 个 body 元 素 (HTML5 中 可 以 将 body 元 素 省 略 不 写 ) 内 部 放置 了 一 个 作 
| 为 容器 的 div 元 素 ， 以 显示 该 网 页 的 背景 图 ， 然 后 将 header 放置 其 中 。 
| 使 用 ul 列表 元 素来 显示 网 站 导航 链接 , 并 在 样式 代码 中 使 用 list-style 属性 控制 列表 编号 不 被 
| 显示 。 


8.2.3 ”构建 侧 边栏 


接 下 来 看 一 下 该 网 页 中 用 来 显示 博 主 介绍 、 博 客 中 所 有 文章 分 类 ， 以 及 网 友 评 论 的 侧 边栏 部 分 。 
| 该 部 分 在 浏览 器 中 的 显示 结果 如 图 8.5 所 示 。 
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| 图 8.5 博客 侧 边栏 效果 图 
| 该 部 分 的 结构 如 下 所 示 : 

| <aside> 

| <section id="conn1"> 

| <header id="connHead1"> 
| <hl1> 子 栏目 标题 <hl> 
| 

| 

| 

| 
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前 面 介绍 过 , 在 HTML5 中 ,aside 元 素 专门 用 来 表示 当前 页 面 或 文章 的 附属 信息 部 分 , 它 可 以 包 | 
含 与 当前 页 面 或 主要 内 容 相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 有 别 于 主要 内 容 的 部 分 。 | 
在 博客 首页 中 ， 可 以 将 博 主 介绍 、 博 主 的 联系 信息 、 博 客 文章 的 分 类 、 最 近 访问 的 网 友信 息 、 网 | 
友 对 博客 文章 的 评论 、 相 关 文 章 的 链接 、 其 他 网 站 的 友情 链接 等 很 多 与 网 站 相关 的 ， 但 不 能 包含 在 当 ， 
前 网 页 的 主体 内 容 中 的 其 他 附属 内 容 ， 放 置 在 aside 元 素 中 。 | 
在 本 例 中 ， 将 博 主 介绍 、 博 客 文章 分 类 ， 及 其 链接 ， 当 单 击 这 个 链接 后 ， 将 主 画 面 跳 转 到 该 分 类 
的 文章 目录 显示 画面 ;网 友 评论 ， 及 其 链接 ， 当 单 击 这 个 链接 后 ， 将 跳 转 到 被 评论 的 文章 显示 画面 ， | 
放 在 了 侧 边栏 中 。 | 
侧 边栏 详细 代码 请 参考 本 节 示例 源 代码 中 的 index.html。 | 
HTML5 会 根据 一 个 aside 元 素 在 大 纲 中 生成 与 之 对 应 的 一 个 节 。 在 本 例 中 , 由 于 没有 对 侧 边 栏 添 | 
加 标题 ， 因 为 在 HIMLS 中 不 强求 对 侧 边栏 添加 标题 ， 而 且 侧 边栏 位 于 整体 网 页 结构 中 的 第 二 部 分 ， 
因此 在 大 纲 中 生成 标题 为 “2. Untitled Section ”的 节 。 
在 aside 元 素 中 ， 因 为 使 用 了 3 个 section 元 素 ， 分 别 显示 博 主 介 绍 、 博 客 文章 分 类 、 网 友 评论 这 
3 个 栏目 的 内 容 ， 并 且 3 个 section 元 素 内 部 都 有 一 个 header 元 素 ， 在 header 元 素 内 部 都 使 用 了 hl 标 | 
题 元 素 ， 标 题 文字 分 别 为 “ 博 主 介绍 ”“ 分 类 ”“ 评 论 ”， 所 以 在 大 纲 中 的 侧 边栏 一 节 内 部 分 别 生 成 3 | 
个 标题 的 节 ， 如 图 8.6 所 示 。 | 
在 博客 文章 分 类 栏目 与 网 友 评 论 栏目 中 使 用 了 两 个 nav 元 素来 





2. Untitied Secton 和 
分 别 显示 博客 文章 的 分 类 及 其 链接 与 网 友 的 评论 及 其 链接 , 所 以 在 大 i 
纲 中 ， 根 据 两 个 nav 元 素 分 别 生成 两 个 标题 为 “1. Untitled Section” Se 


.。 评 计 
的 节 。 1. Untitled Section 


| 
| 
| 
| 
| 
| 
在 博 主 介绍 栏目 中 ,使 用 figure 元 素来 显示 博 主 头像 .在 HTML5 ”图 8.6 侧 边 栏 的 3 个 标题 节 | 
| 
| 
| 
| 
| 
| 





中 ，figure 元 素 用 来 表示 网 页 上 一 块 独立 的 内 容 ， 将 其 从 网 页 上 移 除 

后 不 会 对 网 页 上 的 其 他 内 容 产生 任何 影响 。figure 元 素 所 表示 的 内 容 可 以 是 图 片 、 统计 图 或 代码 示例 。 | 
figcaption 元 素 表示 figure 元 素 的 标题 ， 它 从 属于 figure 元 素 ， 必 须 书写 在 figure 元 素 内 部 ， 可 以 | 

书写 在 figure 元 素 内 的 其 他 从 属 元 素 的 前 面 或 后 面 。 一 个 figure 元 素 内 最 多 允许 放置 一 个 figcaption | 

元 素 ， 但 允许 放置 多 个 其 他 元 素 。 

本 例 中 figure 元 素 中 的 代码 如 下 所 示 。 

<figure> <img src="images\html5.jpg" alt="HTML5+CSS3+JavaScript 从 入 门 到 精通 "> 

<figcaption>HTMLS+CSS3+JavaScript 从 入 门 到 精通 </figcaption> 

</figure> 

可 以 在 样式 代码 中 分 别 指定 figure 元 素 与 figcaption 元 素 的 样式 。 

在 网 友 评论 栏目 中 ， 使 用 time 元 素 与 pubdate 属性 来 显示 每 篇 评论 的 发 布 时 间 。 在 HTML5 中 ， 
time 元 素 代表 24 小 时 中 的 某 个 时 刻 或 某 个 日 期 , time 元 素 的 putdate 属性 代表 了 评论 的 发 布 日 期 和 时 | 
间 ， 代 码 类 似 下 面 所 示 。 

<time datetime="2018-04-01T16:59" pubdate>04-01 16:59</time> | 

| 


整个 侧 边 栏 放置 于 <div id="blogbody"> 容 器 中 ， 使 用 它 将 该 网 页 中 第 二 行 ( 包 括 左边 的 侧 边栏 区 | 
域 与 右边 的 文章 摘要 列表 区 域 ) 与 网 页 顶部 的 标题 区 域 ， 以 及 网 页 底部 的 脚注 区 域 显示 版 权 信息 的 | 
footer 元 素 ) 区 分 开 来 。 

在 <div id="blogbody"> 容 器 内 部 ， 又 使 用 <div id="column_1"> 子 容器 ， 将 左边 的 侧 边 栏 部 分 与 右 
边 的 网 页 主体 部 分 进行 区 分 。 结 构 位 置 关 系 如 下 面 代码 : 
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<div id="blog"> 
<header id="bloghead">[ 标 题 栏 ]</header> 
<div id="blogbody"> 
<divid="column 1"> 
<aside>[ 侧 边栏 ]</aside> 
</div> 
<div id="column_2">[ 主 体内 容 区 域 ]</div> 
</div> 
<footer “id="blogfooter">[ 版 权 栏 ]</footer> 
</div> 













如 何 将 datetime 元 素 与 datetime-local 元 素 应 用 在 Web 程 序 . @ 3-0424 o:29 
St ms 


本文 讨论 在 正式 的 网 站 或 Wu 应用 得 序 中 ， 应 请 加 何 正确 使 用 EXE 5 站 新 增 的 sarerimx 元 村 与 datarins local 元 
再, 


元 素 的 作用 旺 什么 9 与 dotet， 元 素 人 区 别 在 
二 设 胃 丰 地 Nice 和 a ( 盾 》 的 ，darerime 元 系 赤 门 用 未 没 畦 属 亲 丰 


怎样 东 与 这 各 这 两 个 元 素 中 的 


请 名 | 区 有 用 从 怠 | 忆 攻 


图 8.7 主体 内 容 区 域 效果 
该 部 分 的 整体 内 容 被 放置 在 一 个 section 元 素 中 ， 即 文章 摘要 列表 显示 部 分 。 该 部 分 section 元 素 


<div id="column 2"> 
<section id="conn4"> 
<header id="connHead4"> 
<h1> 分 类 </h1> 
<span id="edit2"><a hre 伍 "#">[<cite> 管 理 </cite>]</a></span> </header> 
<div id="connBody4"> 
<div id="bloglist"> 
<section> 
<header> 
<div id="blog title hl"> 
<hl id="blog title1"> <a href="#" target="_blank"></a> </h1l> 
<img title=" 此 博文 包含 图 片 " src="#" id="icon1"> 
<time datetime="2018-04-05T18:30" pubdate> </time> 
</div> 
<div id="articleTag1"> <span id="txtb1"> 分 类 : </span> <a hre 人 ="#"> </a> </div> 
</header> 
<div id="content1"> 
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<p><p> | 

</div> | 

<footer id="tagMorel1"> | 

<div id="tag_txtc1"> <a hre 人 ="#'> 阅 读 </a>&nbsp: | &nbsp: <a href="#'> 评 论 | 

</a>&nbsp: | &nbsp: 还 没有 被 转载 | &nbsp:<a hre 人 "ff"> 收 藏 </a>&nbsp: </div> | 
<divid="more1"> <spanid smorel"><ahre 全 和 "> 查看 全 文 <a>&gk&gt<span> <div> 





</div> 
<div id="connFoot4"> </div> 
</section> 
</div> 


| 
1 
在 这 个 section 元 素 内 部 ， 使 用 1 个 header 元 素 、4 个 section 元 素 、1 个 footer 元 素 ， 其 中 header | 
元 素 的 标题 为 “分 类 ”， 所 以 在 大 纲 中 生成 标题 为 “3. 分 类 ”的 节 。 | 
这 个 section 元 素 内 部 的 3 个 section 子 元 素 中 又 各 自 有 一 个 header 元 素 , 其 中 都 存放 了 一 个 显示 | 
标题 的 hl 的 元 素 ， 标 题 分 别 显示 为 文章 标题 的 名 称 ， 所 以 在 大 纲 中 分 别 生 成 标题 如 图 8.8 所 示 的 3 
个 节 。 | 
| 

| 


中 新 增 number 元 素 的 ValueAsNumber 必 性 
.5 中 新 增 的 日 期 及 时 间 元 素 中 使 用 step 属 性 


可 将 datetime 元 素 与 datetime-local 元 素 应 用 在 Web 程 序 





| 
| 
图 8.8 主体 内 容 区 域 大 纲 结构 | 
| 


另外 ，3 个 section 元 素 中 又 各 自 有 一 个 footer 元 素 ， 存 放 每 篇 文章 的 阅读 链接 ( 单 击 链接 后 打开 
该 文章 )、 评 论 链接 ( 单 击 链接 后 打开 该 文章 并 跳 转 到 评论 部 分 )、 被 转载 次 数 与 收藏 链接 ( 单 击 链 接 
后 收藏 该 文章 )。 
在 显示 网 页 主体 内 容 部 分 的 section 元 素 的 结尾 处 又 使 用 了 一 个 footer 元 素 ， 显 示 对 文章 摘要 列 
表 进 行 分 页 。 由 于 footer 元 素 中 没有 标题 元 素 用 于 生成 大 纲 ， 所 以 在 大 纲 中 没有 根据 这 些 footer 元 素 
生成 任何 节 。 代 码 如 下 所 示 : 
<footer id="SG page"> 
<ulid="SG pages"> | 
<liid="SG_pgon" title=" 当 前 所 在 页 ">1</li> | 
<lititle=" 跳 转 至 第 2 页 "><a hre 仁 "#">2</a></li> | 
<lititle=" 跳 转 至 第 3 页 "><a hre 人 "#">3</a></li> 
<lititle=" 跳 转 至 第 4 页 "><a href="#">4</a></li> 
<liid="SG_pgnext" title=" 跳 转 至 第 2 页 ><a hre 人 "> 下 1 页 &gt:</a></li> 
<liid="SG pgtt" tide="> 共 4 页 </li> 
< 
</footer> 


8.2.5 构建 版 权 信息 


最 后 来 看 一 下 该 页 面 中 位 于 网 页 底部 的 版 权 信息 显示 部 分 ， 该 部 分 在 浏览 器 中 的 显示 效果 如 | 视频 讲解 
图 8.9 所 示 。 L 
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8.9 版权 信息 效果 





<div> 
<p> 版 权 所 有 :HTML5+CSS3+JavaScript 从 入 门 到 精通 &nbsp:&nbsp:Copyright 2018 All Rights 


</div> 
<div> 联 系 QQ:66668888&nbsp:&nbsp: 联 系 电话 : 13066668888</div> 
</footer> 


8.3 设计 详细 页 





在 博客 网 站 中 打开 某 篇 文章 时 ， 将 显示 该 文章 的 详细 显示 页 面 ， 该 页 面 在 浏览 器 中 的 显示 效果 如 
8.10 所 示 。 


一 惫 文章 了 解 HTML5 发 展 史 @ ore ,aa 


3: es 


2 人 二) 立 基 ea， 生生 + 和 0 月 度 ， 这 个 攻 过 /年 的 二 他 于 在 并 各 
TREE 


rcF i 一 加 人 们 一 安信 na 机 A 要 用 嫩 了 一 421 力 
ot hr 的 公司 只 和 成 TRTgd5 扫 ， 直 :00 二， 从 TI 拉手 相关 工 作 ， 生 亲 开 姑 兰 L5， 


na， 有 用 放权 有 及 丰 和 业 腹 抱 的， 更 甩 本 折 此 和 在- 
msm we eam 


A HL bs EL 起， 


TMF ETRE nr Inea Rs We ME 
Ha 


Hie | we | ER 


| bb 
| Smt 
| ei 
| 
| 





RF 
8.10 ”详细 页 效果 


该 页 面 与 博客 首页 的 结构 基本 相似 ， 主 要 分 为 4 个 部 分 : 

| 第 1 部 分 为 网 页 标题 部 分 ， 显 示 该 博客 网 站 的 网 站 标题 、 网 站 链接 与 网 站 导航 。 第 二 部 分 为 网 页 
| 侧 边 栏 ， 显示 博 主 自我 介绍 内 容 、 博 客 文章 的 所 有 分 类 链接 ， 以 及 网 友 对 博客 中 文章 的 最 新 评论 。 这 
| 两 部 分 与 首页 中 的 网 页 标题 部 分 及 侧 边栏 部 分 完全 相同 。 第 三 部 分 为 查看 文章 的 内 容 ， 及 网 友 评 论 部 
| 分 ， 也 是 该 页 面 的 主要 内 容 。 第 四 部 分 为 页 面 底部 显示 的 版 权 信息 内 容 部 分 。 

| 该 页 面 的 主体 结构 也 与 博客 首页 的 主体 结构 大 致 相同 ， 只 是 在 博客 首页 中 使 用 section 元 素来 显 
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| 
示 文 章 摘要 列表 ， 而 在 文章 显示 页 面 中 使 用 section 元 素来 显示 文章 内 容 与 网 友 的 评论 内 容 。 该 页 面 | 
的 主体 结构 如 下 所 示 : 


<div id="blog"> 
<header id="bloghead"> 
<div id="blogTitle"> 
<hl id="blogname">[ 标 题 栏 ]-</h1> 
</div> 
<nav id="blognav"> | 
<ul id="blognavInfo"> | 
<li>[ 导 航 栏 ]</li> | 
</ul> 
</nav> 
</header> | 
<div id="blogbody"> | 
<div id="column 1"> | 
<aside>[ 侧 边栏 ]</aside> 
</div> 
<div id="column 2"> | 
<section id="conn4"> | 
<header id="connHead4"> | 
<hl> 分 类 </hl> | 
</header> 
<div id="connBody5"> 
<article id="bloglist"> 
<header> 
<div id="blog title hl"> 
<hl id="blog_title1">[ 文 章 标题 栏 ]</h1> 
</div> 
</header> 
<div id="content1"> 
<p>[ 文 章 正文 ]</p> 
</div> 
<div id="tagMorel"> 
</div> 
<section> 
<div id="allComm"> | 
<div id="allCommTitl"><strong> | 
<h4>[ 评 论 标题 栏 ]</h4> | 
</strong> </div> 
<ulid="cmp revert"> 
<liid-"linedotl">[ 评 论 列表 ]</li> | 
<uP> | 
</div> | 
<div id="writeComm"> | 
<iframe src="writeComm html" width="90%" height="300"> </iftame> | 
</div> | 
</section> | 
</article> | 
| 








<div> 
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| </section> 
| </div> 
| </div> 

<footer id="blogfooter"> 





攻克 | _ <p>[ 版 权 信息 ]<p> 
a 
</footer> 


1. HTML5+CSS3+JavaScript 从 入 门 到 酉 到 
gled Section 


2. 分 类 
1. Untitled Section 


1. Untitled Section 
9 并 





1. 一 前 文章 了 解 HTML5 发 展 史 
1 评论 





委 便 区间 图 8.11 详细 页 大 纲 

| 网 页 标题 部 分 与 侧 边栏 部 分 如 何 生成 大 纲 ， 在 上 面 已 经 介绍 过 ， 这 里 不 再 袭 述 。 接 下 来 介绍 该 页 
| 面 中 的 主体 部 分 ， 即 文章 内 容 及 网 友 评 论 部 分 中 是 如 何 使 用 各 种 结构 元 素来 措 建 该 部 分 的 组 织 结构 
| 并 生成 这 个 大 纲 的 。 

| 该 部 分 的 整体 内 容 被 放置 在 1 个 section 元 素 中 ， 该 section 元 素 的 内 部 结构 如 下 面 代码 所 示 。 

| 


<section id="conn4"> 
<header id="connHead4"> 
<h1> 分 类 </h1> 
| <span id="edit1"><a hre 住 "#">[<cite> 管 理 </cite>]</a></span> </header> 
| <div id="connBody5"> 
| <article id="bloglist"> 
<header> 
<div id="blog title hl"> 
<hl id="blog_title1"> <a hre 仁 "#">1 篇 文章 了 解 HIMLS 发 展 史 </a> </hl> 
| <img title=" 此 博文 包含 图 片 " src="images/preview.gif" id="icon1"> 
| <time datetime="2018-04-05T18:30" pubdate>(2018-04-05 18:30)</time> 
| </div> 
<div id="articleTag1"> <span id="txtb1"> 分 类 : </span> <a hre 伍 "#">HTML5</a> </div> 
</header> 
| <div id="contentl"> 
| <p>&nbsp:&nbsp:&nbsp:2007 年 W3C( 万 维 网 联盟 ) 立 项 HTML5， 直 至 2014 年 10 月 底 ， 
| 这 个 长 达 八 年 的 规范 终于 正式 封 稿 。</p> 
' 


<div id="tagMorel"> 
| <div id="tag_txtc1"> <a hre 仁 "#'> 阅 读 </a>&nbsp: } &nbsp: <a hre 人 ="#"> 评 论 </a>&nbsp: } 
| &nbsp: 还 没有 被 转载 | &nbsp:<a href="javascript::" onclick="retum false:"> 收 藏 <Ja>&nbsp: </div> 
| <Jdiv> 
| <section> 


“158® 


第 8 章 综合 演练 : 设计 网 站 结构 





<div id="allComm"> 
<div id="allCommTitl"> <strong> 
<h4> 评 论 <h4> 
</strong> </div> 
<ul id="cmp revert"> 
<liid="linedotl"> 
<div id="revert Contl"> 
<p> <span id="revert_Tit1"> 新 浪 网 友 </span> <span id-"revert_ Timel"> 
<time datetime="2018-03-26T23:18:41" pubdate>2018-03-26 | 





23:18:41</time> | 

&nbsp: </span> </p> | 

<div id="revert_Inner txtb1"> 手 好 的 </div> | 

</div> | 

<li> | 

ee | 

<hl> | 

</div> | 

<div id="writeComm"> | 

<iframe ste="writeComm. html" width="90%" height="300"> </ifame> | 

/div> | 

</section> | 

</article> | 

</div> | 
</section> 


在 显示 文章 内 容 与 评论 部 分 的 section 元 素 中 ， 首 先 使 用 了 1 个 header 元 素 ， 在 该 元 素 内 部 使 用 
了 1 个 文字 为 “分 类 ”的 标题 元 素 hl， 所 以 在 大 纲 中 生成 1 个 标题 为 “3. 分 类 ”的 节 。 

在 header 元 素 后 面 紧 接着 使 用 了 1 个 article 元 素 ， 用 来 显示 文章 内 容 与 网 友 评论 。 在 这 个 article 
元 素 内 部 使 用 了 1 个 header 元 素 ， 在 该 元 素 内 部 又 使 用 了 1 个 标题 元 素 hl， 所 以 在 大 岗 中 生成 1 个 
标题 为 “1. 1 篇 文章 了 解 HTMLS5 发 展 史 ”的 节 。 

在 article 元 素 内 部 ， 在 header 元 素 后 面 显 示 了 标题 为 “1 篇 文章 了 解 HIMLS 发 展 史 ”的 文章 的 
全 部 内 容 , 在 文章 叙述 完毕 之 后 使 用 了 1 个 section 元 素 , 在 这 个 元 素 内 部 又 使 用 了 1 个 header 元 素 。 
在 这 个 header 元 素 之 中 又 使 用 了 1 个 文字 为 “评论 ”的 标题 元 素 hM4， 所 以 在 大 纲 中 生成 1 个 标题 为 | 
“1. 评 论 ” 的 节 。 | 

另外 ， 在 标题 为 “评论 ”的 section 元 素 中 使 用 了 1 个 过 ame 内 翌 网 页 ， 在 该 网 页 中 使 用 了 1 个 | 
表单 ， 在 该 表单 中 放置 了 1 个 用 来 写 评论 内 容 的 textarea 元 素 ， 以 及 1 个 用 来 提交 评论 内 容 的 “发 评 | 
论 ” 按 钮 。 | 
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第 9 章 
CSS3 基础 


CSS ( Cascading Style Sheet ) 表示 层 合 样式 表 ， 定 义 如 何 演 染 HTML 标签 ,设计 网 页 显示 
效果 。 使 用 CSS 可 以 实现 网 页 内 容 与 表现 的 分 离 ， 以 便 提 升 网 页 执行 效率 ， 方 便 后 期 管理 和 代 


码 维护 ， 


【 学 习 要 点 】 

WI 了 解 CSS 发 展 历史 

熟悉 CSS 基本 语法 和 用 法 
灵活 使 用 CSS 选择 器 

了 解 CSS 基本 将 性 


吾 吾 于 


第 9 章 CSS3 基础 





9.1 CSS 历史 


早期 的 HTML 结构 和 样式 是 混在 一 起 的 ， 通 过 HTML 标签 组 织 内 容 ， 通 过 标签 属性 设置 显示 效 


果 ， 这 就 造成 了 网 页 代码 混乱 不 堪 ， 代 码 维护 也 变 得 不 堪 重 负 。 

1994 年 年 初 ， 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 伯 特 “波斯 (Bert Bos) 当时 正在 设计 一 款 Argo 
浏览 器 ， 于 是 他 们 一 拍 即 合 ， 决 定 共同 开发 CSS。 

1994 年 年 底 ， 哈 坤 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 波斯 一 起 再 次 
展示 这 个 建议 。 当 时 W3C (World Wide Web Consortium， 万 维 网 联盟 ) 组 织 刚刚 成 立 ，W3C 对 CSS 
的 前 途 很 感 兴趣 ， 为 此 组 织 了 一 次 讨论 会 ， 哈 坤 和 波斯 是 这 个 项 目的 主要 技术 负责 人 。 

1996 年 年 底 ，CSS 语言 正式 设计 完成 ， 同 年 12 月 CSS 的 第 一 版 本 被 正式 发 布 (http:/www.w3. 
org/TR/CSS1/), 





1997 年 年 初 ，W3C 组 织 专门 负责 CSS 的 工作 组 ， 负 责 人 是 克 里 斯 " 里 雷 。 于 是 该 工作 组 开始 讨 | 


论 第 一 个 版 本 中 没有 涉及 的 问题 。 
1998 年 5 月 ，CSS2 版 本 正式 发 布 (http://www.w3.org/TR/CSS2/)。 


2002 年 ，W3C 的 CSS 工作 组 启动 了 CSS2.1 开发 。 这 是 CSS2 的 修订 版 ， 它 纠正 CSS2.0 版 本 中 | 


的 一 些 错误 ， 并 且 更 精确 地 描述 了 CSS 的 浏览 器 实现 。 

2004 年 ，CSS2.1 正式 发 布 。 

2006 年 年 底 ， 进 一 步 完 善 CSS2.1。CSS2.1 也 成 为 目前 最 流行 、 获 得 浏览 器 支持 最 完整 的 版 本 ， 
它 更 准确 地 反映 了 CSS 当前 的 状态 。 

CSS3 开发 工作 在 2000 年 之 前 就 开始 了 , 但 是 距离 最 终 的 发 布 还 有 相当 长 的 路 要 走 , 为 了 提高 开 


发 速度 ， 也 为 了 方便 各 主流 浏览 器 根据 需要 渐进 式 支持 ，CSS3 按 模块 化 进行 全 新 设计 ， 这 些 模块 可 


以 独立 发 布 和 实现 ， 这 也 为 日 后 CSS 的 扩展 葛 定 了 基础 。 


到 目前 为 止 ，CSS3 还 没有 推出 正式 的 完整 版 ， 但 是 已 经 陆续 推出 了 不 同 的 模块 ， 这 些 模块 已 经 


被 大 部 分 浏览 器 支持 或 部 分 实现 。 


CSS3 属性 支持 情况 请 访问 http://fmbip.comy/litmus/ 详 细 了 解 。 可 以 看 出 ,完全 支持 CSS3 属性 的 | 


浏览 器 包括 Chrome 和 Safari。 


CSS3 选择 器 支持 情况 请 访问 http://fmbip.conylitmus/ 详 细 了 解 。 除了 IE 早期 版 本 和 Firefox 3, 其 | 


他 主流 浏览 器 几乎 全 部 支持 ， 如 Chrome、Safari、Firefox、Opera。 


容 提示 : 部 分 浏览 器 允许 使 用 私有 属性 支持 CSS3 的 新 特性 ， 简 单 说 明 如 下 : 

Webkit 类 型 浏览 器 的 ( 如 Safari、Chrome ) 的 私有 属性 是 以 -webkit- 前 级 开始 。 
Gecko 类 型 的 浏览 器 (如 Firefox ) 的 私有 属性 是 以 -moz- 前 组 开始 。 

Konqueror 类 型 的 浏览 器 的 私有 属性 是 以 -khtml- 前 级 开始 。 

Opera 浏览 器 的 私有 属性 是 以 -0- 前 级 开始 。 

Internet Explorer 浏览 器 的 私有 属性 是 以 -ms- 前 级 开始 ，IE 8+ 支 持 -ms- 前 级 。 


回回 回回 加 


9.2 初 用 CSS 


CSS 是 一 种 标识 语言 ， 可 以 在 任何 文本 编辑 器 中 编辑 。 下 面 简单 介绍 CSS 的 基本 用 法 。 
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样式 分 蝎 符 


属性 。 属性 值 属性 属性 值 
图 9.1 CSS 样式 基本 格式 


选择 器 (Selector) : 指定 样式 作用 于 哪些 对 象 ， 这 些 对 象 可 以 是 某 个 标签 、 指 定 Class 或 ID 
值 的 元 素 等 。 浏 览 器 在 解析 这 个 样式 时 ， 根 据 选择 器 来 泻 染 对 象 的 显示 效果 。 

声明 (Declaration) : 指定 浏览 器 如 何 泻 染 选择 器 匹配 的 对 象 。 声 明 包括 两 部 分 ， 属 性 和 属 
性 值 ， 并 用 分 号 来 标识 一 个 声明 的 结束 ， 在 一 个 样式 中 最 后 一 个 声明 可 以 省 略 分 号 。 所 有 声 
明 被 放置 在 一 对 大 括号 内 ， 然 后 位 于 选择 器 的 后 面 。 

属性 (Property) : CSS 预 设 的 样式 选项 。 属 性 名 是 一 个 单词 或 多 个 单词 组 成 ， 多 个 单词 之 
间 通 过 连 字符 相连 。 这 样 能 够 很 直观 地 了 解 属性 所 要 设置 样式 的 类 型 。 

属性 值 (Value) : 定义 显示 效果 的 值 ， 包 括 值 和 单位 ， 或 者 仅 定 义 一 个 关键 字 。 


【示例 】 下 面 示例 简单 演示 了 如 何在 网 页 中 设计 CSS 样式 。 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 testhtml。 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
第 3 步 ， 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 网 页 字体 大 小 为 24 像素 ， 字 体 颜 色 为 白色 。 
body {font-size: 24px; color: #fEE} 
第 4 步 ， 输 入 下 面 样式 代码 ， 定 义 段落 文本 的 背景 色 为 蓝 色 。 
Pp { background-color: #00F: } 


第 5 步 ， 在 <body> 标 签 内 输入 下 面 一 段 话 ， 然 后 在 浏览 器 中 预览 ， 则 效果 如 图 9.2 所 示 。 





图 9.2 使 用 CSS 定义 段落 文本 样式 


<body> 
<p> 葛 等闲 ， 白 了 少年 头 ， 空 翡 切 。 </p> 
</body> 


9.2.2 引入 CSS 样式 


在 网 页 中 ， 有 3 种 方法 可 以 正确 引入 CSS 样式 ， 让 浏览 器 能 够 识别 和 解析 。 
行内 样式 
把 CSS 样式 代码 置 于 标签 的 style 属性 中 ， 例 如 : 
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<span style="color:red:"> 红 色 字体 </span> 

<div style="border:solid 1px blue: width:200px: height:200px:"></div> 

这 种 用 法 没有 真正 把 HTML 结构 与 CSS 样式 分 离 出 来 ， 一 般 不 建议 大 规模 使 用 。 除 非 为 页 面 中 pp 
某 个 元 素 临时 设置 特定 样式 。 | 名 | 


内 部 样式 | 

i 

body {/* 页 面 基 本 属性 */ | 
font-size: 12px: | 
color: #CCCCCC: 











六 有 小 文 二 可 而 属性 */ 

P { background-color: #FFOOFF: } 

</style> 

把 Css 样式 代码 放 在 <style> 标 签 内 。 这 种 用 法 也 称 为 网 页 内 部 样式 。 该 方法 适合 为 单 页 面 定义 
CSS 样式， 不 适合 为 一 个 网 站 ， 或 多 个 页 面 定义 样式 。 

内 部 样式 一 般 位 于 网 页 的 头 部 区 域 ， 目 的 是 让 CSS 源 代码 早 于 页 面 源 代码 下 载 并 被 解析 ， 避 免 | 
当 网 页 下 载 之 后 ， 还 无 法 正常 显示 。 | 

加 ”外 部 样式 | 

把 样式 放 在 独立 的 文件 中 ， 然 后 使 用 <link> 标 等 或 者 @import 关键 字 导 入 。 一 般 网 站 都 采用 这 种 
方法 来 设计 样式 ， 真 正 实现 HTML 结构 和 CSS 样式 的 分 离 ， 以 便 统筹 规划 、 设 计 、 编 辑 和 管理 CSS 
样式 。 


9.2.3 CSS 样式 表 


样式 表 是 一 个 或 多 个 CSS 样式 组 成 的 样式 代码 段 。 样 式 表 包括 内 部 样式 表 和 外 部 样式 表 ， 它 们 | 
没有 本 质 不 同 ， 只 是 存放 位 置 不 同 。 

内 部 样式 表 包 含 在 <style> 标 签 内 ， 一 个 <style> 标 签 就 表示 一 个 内 部 样式 表 ， 而 通过 标签 的 style 
属性 定义 的 样式 属性 就 不 是 样式 表 。 如 果 一 个 网 页 文档 中 包含 多 个 <style> 标 签 ， 就 表示 该 文档 包含 了 
多 个 内 部 样式 表 。 

如 果 CSS 样式 被 放置 在 网 页 文档 外 部 的 文件 中 ， 则 称 为 外 部 样式 表 ， 一 个 CSS 样式 表 文 档 就 表 
示 一 个 外 部 样式 表 。 实 际 上 ， 外 部 样式 表 也 就 是 一 个 文本 文件 ， 其 扩展 名 为 .css。 当 把 不 同 的 样式 复 
制 到 一 个 文本 文件 中 后 ， 另 存在 为 .css 文件 ， 它 就 是 一 个 外 部 样式 表 。 

在 外 部 样式 表 文 件 项 部 可 以 定义 CSS 源 代码 的 字符 编码 。 例 如 ， 下 面 代码 定义 样式 表 文 件 的 字 ， 
符 编码 为 中 文 简体 。 | 

@charset "gb2312": 


如 果 不 设置 CSS 文件 的 字符 编码 ， 可 以 保留 默认 设置 ， 则 浏览 器 会 根据 HTML 文件 的 字符 编码 | 
来 解析 CSS 代码 。 | 


9.2.4 ”导入 外 部 样式 表 
外 部 样式 表 文件 可 以 通过 两 种 方法 导入 到 HTML 文档 中 。 
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1. 使 用 <link> 标 签 

使 用 <link> 标 签 导 入 外 部 样式 表 文件 的 代码 如 下 : 

| <link href="001.css" rel="stylesheet" type="text/css" /> 

| 该 标签 必须 设置 的 属性 说 明 如 下 : 


href; 定义 样式 表 文件 URL。 


| type: 定义 导入 文件 类 型 ， 同 style 元 素 一 样 。 

rel: 用 于 定义 文档 关联 ， 这 里 表示 关联 样式 表 。 

2. 使 用 @import 关键 字 

在 <style> 标 签 内 使 用 @import 关键 字 导 入 外 部 样式 表 文 件 的 方法 如 下 : 


<style type="text/css"> 

@import url("001.css"); 
</style> 

| 


在 @import 关键 字 后 面 ， 利 用 ul0 函 数 包含 具体 的 外 部 样式 表 文件 的 地 址 。 
| 9.2.5 CSS 格式 化 
视频 讲解 | ”在 CSS 中 增加 注释 很 简单 ， 所 有 被 放 在 “/*” 和 “*/” 分 隔 符 之 间 的 文本 信息 都 被 称 为 注释 。 








全 注释 所 

| 或 

人 

注释 

4 

在 CSS 中 ， 各 种 空格 是 不 被 解析 的 ， 因 此 用 户 可 以 利用 Tab 键 、 空 格 键 对 样式 表 和 样式 代码 进 
| 行 格式 化 排版 ， 以 方便 阅读 和 管理 。 


| 9.2.6 CSS 属性 


CSS 属性 众多 , 在 W3C CSS2.0 版 本 中 共有 122 个 标准 属性 (http://www.w3.org/TR/CSS2/propidx. 
| html)， 在 W3C CSS2.1 版 本 中 共有 115 个 标准 属性 (http:/www.w3.org/TR/CSS21/propidx.html)， 其 
| 中 删除 了 CSS2.0 版 本 中 的 7 个 属性 : font-size-adjust、font-stretch、marker-offset、marks、page、size 
| 和 textshadow。 在 W3C CSS3 版 本 中 又 新 增加 了 20 多 个 属性 http://www.w3.org/Style/CSS/current- 
| work#CSS3), 

| 本 节 不 准备 逐个 介绍 每 个 属性 的 用 法 ， 我 们 将 在 后 面 各 章节 中 详细 说 明 ， 用 户 也 可 以 参考 CSS3 
| 参考 手册 具体 了 解 。 


9.2.7 CSS 属性 值 


| CSS 属性 取 值 比较 多 ， 具 体 类 型 包括 长 度 、 和 角度、 时间、 频率、 布局、 分 辨 率 、 颜 色 、 文 本 、 函 
| 数 、 生 成 内 容 、 图 像 和 数字 等 。 常 用 的 是 长 度 值 ， 其 他 类 型 值 将 在 相应 属性 中 具体 说 明 。 
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下 面 重点 介绍 一 下 长 度 值 ， 长 度 值 包括 两 类 : 
1. 绝对 值 
绝对 值 在 网 页 中 很 少 使 用 ， 一 般 用 在 特殊 的 场合 。 常 见 绝对 单位 包括 : 
英寸 (in) : 使 用 最 广泛 的 长 度 单位 。 
厘米 (cm) : 最 常用 的 长 度 单位 。 
毫米 (mm) : 在 研究 领域 使 用 广泛 。 | 
磅 (pt) : 也 称 点 ， 在 印刷 领域 使 用 广泛 。 | 
pica (pec) : 在 印刷 领域 使 用 广泛 。 
2. 相对 值 
根据 屏幕 分 辨 率 、 可 视 区 域 、 浏 览 器 设置 ， 以 及 相关 元 素 的 大 小 等 因素 确定 值 的 大 小 。 常 见 相 对 
单位 包括 : 
(1) em 
em 表示 字体 高 度 ， 它 能 够 根据 字体 的 font-size 值 来 确定 大 小 ， 例 如 : 
Pp{* 设 置 段 落 文本 属性 */ 
font-size: 12px; 
line-height:2em:/* 行 高 为 24px*/ 





加 图 回 罗 加 





} 

从 上 面 样式 代码 中 可 以 看 出 : 一 个 em 等 于 font-size 的 属性 值 ， 如 果 设 置 font-size:12pt， 则 
line-height:2em 就 会 等 于 24pt。 如 果 设 置 font-size 属 性 的 单位 为 em, 则 em 的 值 将 根据 父 元 素 的 font-size 
属性 值 来 确定 。 例 如 ， 定 义 如 下 HTML 局 部 结构 。 

<div id="main"> 

<p>em 相对 长 度 单位 使 用 </p> 

</div> 

再 定义 如 下 样式 : 

#main{ font-size:12px:} 

P {font-size:2em:;} /* 字 体 大 小 将 显示 为 24px*/ 

同 理 ， 如 果 父 对 象 的 font-size 属性 的 单位 也 为 em， 则 将 依次 向 上 级 元 素 寻 找 参考 的 font-size 属 | 
性 值 ， 如 果 都 没有 定义 ， 则 会 根据 浏览 器 默认 字体 进行 换算 ， 默 认 字体 一 般 为 16px。 | 

(2) ex | 
ex 表示 字母 x 的 高 度 。 | 
(3) px 

PX 根据 屏幕 像素 点 来 确定 大 小 。 这 样 不 同 的 显示 分 辩 率 就 会 使 相同 取 值 的 px 单位 所 显示 出 来 的 

效果 截然 不 同 。 
(4) % 

% 百分比) 也 是 一 个 相对 单位 值 。 百 分 比值 总 是 通过 另 一 个 值 来 确定 当前 值 ， 一 般 参考 父 对 象 | 
中 相同 属性 的 值 。 例 如 ， 如 果 父 元 素 宽度 为 500px， 子 元 素 的 宽度 为 50%， 则 子 元 素 的 实际 宽度 为 | 
250px。 
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9.3 元 素 选 择 器 


| 元素 选 择 器 包括 标签 选择 器 、 类 选择 器 、ID 选择 器 和 通 配 选择 器 。 


EY 9.3.1 标签 选择 器 





标签 选择 器 也 称 为 类 型 选择 器 ， 它 直接 引用 HTML 标签 名 称 ， 用 来 匹配 同名 的 所 有 标签 。 

| 优点 : 使 用 简单 ， 直 接 引 用 ， 不 需要 为 标签 添加 属性 。 

| 缺点 : 匹配 的 范围 过 大 ， 精 度 不 够 。 

| 因此 ， 一 般 常用 标签 选择 器 重 置 各 个 标签 的 默认 样式 。 

| 【示例 】 下 面 示例 统一 定义 网 页 中 段落 文本 的 样式 为 : 段落 内 文本 字体 大 小 为 12 像素 ， 字 体 颜 
| 色 为 红色 。 实 现 该 效果 ， 可 以 考虑 选用 标签 选择 器 定义 如 下 样式 。 





语 字体 大 小 为 12 像素 */ 
# 字体 颜色 为 红色 */ 





| 缺点 : 需要 为 标签 定义 class 属性 ， 影 响 文档 结构 ， 操 作 相对 麻烦 。 
| 【示例 】 下 面 示 例 演 示 如 何在 对 象 中 应 用 多 个 样式 类 。 
| 第 1 步 ， 新 建 HTML5 文档 ， 保 存 为 testhtml。 

第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

第 3 步 ， 在 <style> 标 签 内 输入 下 面 样式 代码 ， 定 义 3 个 类 样式 : red、underline 和 italic。 


上 # 颜色 类 */ 

Ted { color red: } PR 
庆 下 划 线 类 */ 

.underline { text-decoration: underline: } /# 下 划 线 */ 
上 # 斜体 类 */ 


| 

| 

| 

| 

‘italic { font-style: italic: } 
第 4 步 ， 在 段落 文本 中 分 别 引用 这 些 类 ， 其 中 第 2 段 文 本 标签 引用 了 3 个 类 ， 演 示 效 果 如 图 9.3 
| 所 示 。 





图 9.3 多 类 应 用 效果 
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<p class"underline"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春 水 向 东 流 。</p> 


<p class="red italic underline"> 前 不断， 理 还 乱 ， 是 离 悉 。 别 是 一 般 滋 味 在 心头 。</p> | 
<p class="italic"> 独 自 莫 凭 栏 ， 无 限 江山 ， 别 时 容易 见 时 难 。 流 水 落花 春 去 也 ， 天 上 人 间 。</p> | 
| 


9.3.3 ID 选择 器 


ID 选择 器 以 井 号 〈#) 为 前 级 ， 后 面 是 一 个 ID 名 。 应 用 方法 : 在 标签 中 定义 id 属性 ， 然 后 设置 
属性 值 为 ID 选择 器 的 名 称 。 





优点 : 精准 匹配 。 
回 缺点 : 需要 为 标签 定义 id 属性 ， 影 响 文档 结构 ， 





相对 于 类 选择 器 ， 缺 乏 灵活 性 。 
【示例 】 下 面 示例 演示 如 何在 文档 中 应 用 ID 选择 器 。 | 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 <div> 标 签 。 | 
<div id="box"> 问 君 能 有 几 多 悉 ， 恰 似 一 江 春水 向 东 流 。</div> | 


第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 | 

第 3 步 ， 输 入 下 面 样式 代码 ， 为 该 盒子 定义 固定 的 宽 和 高 ， 并 设置 背景 图 像 ， 以 及 边框 和 内 | 

边 距 大 小 。 | 

夫 ox {六 辐 样 式 对 | 
background:url(images/1.png) center bottom:  /* 定义 背景 图 像 并 居中 、 底 部 对 齐 */ 


height:200px: /# 固定 盒子 的 高 度 */ 

width:400px: 族 固定 盒子 的 宽度 */ | 
border:solid 2px red: /# 边框 样式 */ | 
padding: 100px: 店 增加 内 边 距 */ | 


} 
第 4 步 ， 在 浏览 器 中 预览 效果 如 图 9.4 所 示 。 





图 9.4 JID 选择 器 的 应 用 
次 提示 : 不 管 是 类 选择 器 ， 还 是 ID 选择 器 ， 都 可 以 指定 一 个 限定 标签 名 ， 用 于 限定 它们 的 应 用 | 


范围 。 例 如 ， 针 对 上 面 示例 ， 在 ID 选择 器 前 面 增加 一 个 div 标签 ， 这 样 div#box 选择 器 
的 优先 级 会 大 于 #box 选择 器 的 优先 级 在 同等 条 件 下 ,浏览 器 会 优先 解析 divfbox 选择 | 
器 定义 的 样式 。 对 于 类 选择 器 ， 也 可 以 使 用 这 种 方式 限制 类 选择 器 的 应 用 范围 ， 并 增加 ， 
其 优先 级 。 


| 
| 
| 
\ 
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9.3.4 通 配 选 择 器 


通 配 选 择 器 使 用 星 号 〈*) 表示 ， 用 来 匹配 文档 中 的 所 有 标签 。 
【示例 】 使 用 下 面 样式 可 以 清除 所 有 标签 的 边 距 。 


* { margin: 0; padding: 0: } 





9.4 关系 选择 器 


当 把 两 个 简单 的 选择 器 组 合 在 一 起 就 形成 了 一 个 复杂 的 关系 选择 器 , 通过 关系 选择 器 可 以 精确 匹 
加 | 配 HIML 结构 中 特定 范围 的 元 素 。 


9.4.1 包含 选择 器 






| 回 优点 ;可 以 缩小 匹配 范围 
| 回 缺点: 匹配 范围 相对 较 大 ， 影 响 的 层级 不 受 限 制 。 

| 【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 : 
| 

| 

| 





<div id="wrap"> 
<div id="header"> 
<p> 头 部 区 域 段落 文本 </p> 
</div> 
<div id="main"> 
<p> 主 体 区 域 段 落 文本 </p> 


| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 。 然 后 定义 样式 ， 希 望 实 
| 现 如 下 设计 目标 : 

| 回 ”定义 <div id="header"> 包 含 框 内 的 段落 文本 字体 大 小 为 14 像素 。 

| 回 ”定义 <div id="main"> 包 含 框 内 的 段落 文本 字体 大 小 为 12 像素 。 

这 时 可 以 利用 包含 选择 器 来 快速 定义 样式 ， 代 码 如 下 : 

#header p { font-size:14px:} 

#main p {font-size:12px:} 


| 9.4.2 子 选 择 器 





得。 子 选 择 器 使 用 尖 角 号 (>) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 表示 包含 的 父 对 象 ， 后 面 选择 器 
| 表示 被 包含 的 子 对 象 。 
 。。 回 “优点 : 相对 包含 选择 器 ， 匹 配 的 范围 更 小 ， 从 层级 结构 上 看 ， 匹 配 目标 更 明确 。 
”加 ”缺点 相对 于 包含 选择 器 ， 匹 配 范围 有 限 ， 需 要 熟悉 文档 结构 。 
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【示例 】 新 建 网 页 ， 在 <body> 标 签 内 输入 如 下 结构 : 
<h2><span> 眶 美人 。 春花 秋月 何 时 了 </span></h2> | 
<div><span> 春 花 秋 月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 岐 栏 玉 砌 应 多 在 ， 只 ， 
是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春 水 向 东 流 。 </span></div> | 
在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 在 内 部 样式 表 中 定义 所 有 span 元 素 的 字体 大 小 | 
为 18 像素 ， 再 用 子 选择 器 定义 h2 元 素 包含 的 span 子 元 素 的 字体 大 小 为 28 像素 。 


Span { font-size: 18px: } | 
bh2 > span { font-size: 28px: } | 


在 浏览 器 中 预览 ， 显 示 效 果 如 图 9.5 所 示 。 








OI» lechor: 
虞 美人 .春花 秋月 何 时 了 





春花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 
回首 月 明 中 -。 难 栏 玉 砌 应 犹 在， 只 是 朱 颜 改 。 问 君 能 有 几 多 
秋 ? 恰似 一 江 春 水 向 东 流 。 





图 9.5 子 选择 器 应 用 


9.4.3 ” 相 邻 选择 器 


相 邻 选择 器 使 用 加 号 〈+) 连接 两 个 简单 的 选择 器 ， 前 面 选 择 器 指定 相 邻 的 前 面 一 个 元 素 ， 后 面 
选择 器 指定 相 邻 的 后 面 一 个 元 素 。 

优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 、 相 邻 元 素 。 

缺点 : 使 用 前 需要 熟悉 文档 结构 。 | 

【示例 】 下 面 示例 通过 相 邻 选择 器 快速 匹配 出 标题 下 面相 邻 的 p 元 素 , 并 设计 其 包含 的 文本 居中 


显示 ， 效 果 如 图 9.6 所 示 。 | 
| 
| 


<style type="text/css"> 

h2., h2 + p { text-align: center: } 
</style> 

<h2> 虞 美人 。 春 花 秋月 何 时 了 </h2> 





<p> 李 煜 </p> | 
<p> 春 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回首 月 明 中 。 </p> | 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 朱 颜 改 。 问 君 能 有 几 多 悉 ? 恰似 一 江 春 水 向 东 流 。 </p> | 


康美 人 -春花 秋月 何 时 了 


| 
| 
地 得 | 
者 花 赤 月 何 时 了 ? 蔡 事 知 多 少 。 小 楼 昨夜 又 东风 故国 不 挫 回 首 月 明 中 | 
习作 玉 动 应 汐 在 ， 只 是 朱 请 改 - 问 轩 能 有 几 多 乱 9 愉 似 一 江 考 水 向 东 沪 。 





图 9.6 相 邻 选择 器 的 应 用 
如 果 不 使 用 相 邻 选择 器 ， 用 户 需要 使 用 类 选择 器 来 设计 ， 这 样 就 相对 麻烦 很 多 。 
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| 9.4.4 兄弟 选择 器 


| 兄弟 选择 器 使 用 波浪 符号 〈~) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 指定 同 级 的 前 置 元 素 ， 后 面 
| 选择 器 指定 其 后 同 级 所 有 匹配 的 元 素 。 
| 优点 : 在 结构 中 能 够 快速 、 准 确 地 找到 同 级 靠 后 的 元 素 。 
缺点 : 使 用 前 需要 熟悉 文档 结构 ， 匹 配 精度 没有 相 邻 选择 器 具体 。 

【 示例】 以 9.4.3 节 示 例 为 基础 ， 添 加 如 下 样式 ， 定 义 标题 后 面 所 有 段落 文本 的 字体 大 小 为 14 
| 像素 ， 字 体 颜 色 为 红色 。 
| h2 ~p { font-size: 14px: color:red: } 

在 浏览 器 中 预览 ， 页 面 效果 如 图 9.7 所 示 ， 可 以 看 到 兄弟 选择 器 匹配 的 范围 包含 了 相 邻 选择 器 匹 
| 配 的 元 素 。 


虞 美人 -春花 秋月 何 时 了 


音 共 和 月 何 时 了 9 和 可 知 多 少 。 小 村 昨夜 又 东风 ， 放 国 不堪 回 百 月 8 中 
十 栏 王 市 应 陇 在 ， 只 是 村 新 改 * 问 用 角 育 几 多 悉 ? 信众 一 江天 水 同 东 流 ， 





| 图 9.7 兄弟 选择 器 的 应 用 

9.4.5 ”分 组 选择 器 

| 分 组 选择 器 使 用 逗号 〈,) 连接 两 个 简单 的 选择 器 ， 前 面 选择 器 匹配 的 元 素 与 后 面 选择 器 匹配 的 
| 元 素 混 合 在 一 起 作为 分 组 选择 器 的 结果 集 。 

| ， 回 优点 : 可 以 合并 相同 样式 ， 减 少 代 码 宛 余 。 


缺点 不 方便 个 性 管理 和 编辑 。 
【示例 】 下 面 示例 使 用 分 组 将 所 有 标题 元 素 统一 样式 。 


margin: 0: 上 # 清除 标题 的 默认 外 边 距 */ 
margin-bottom: 10px: 上 # 使 用 下 边 距 拉 开 标题 距离 */ 


9.5 属性 选择 器 


属性 选择 器 是 根据 标签 的 属性 来 匹配 元 素 ， 使 用 中 括号 进行 标识 : 
[属性 表达 式 ] 
CSS3 包括 7 种 属性 选择 器 形式 ， 下 面 结 合 示例 具体 说 明 如 下 。 
【 示例】 下面 示例 设计 一 个 简单 的 图 片 灯箱 导航 示例 。 其 中 HIML 结构 如 下 。 
<div class="pic_box"> 
<img src="images/bgljpg" > 
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<div class="nav"> 
<a href="#1" class= "links item first" title="w3cplus" target ”blank" id="first" >1</a> | 
<a href="#2" class="links active item" title="test websiter target="_blank" lang="zh">2</a> | 
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> | 





<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> | 会 内 
<a href="#5" class="links item" title="zh-cn">5</a> | 2， 
<a href="#6" class="links item" title="website link" lang="zh">6</a> 





<a href="#7" class="links item" title="open the website" lang="cn">7</a> 
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a> | 
<a href="#9" class="links item" title="http://www.baidu.com">9</a> | 
<a href="#10" class="links item last" id="last">10</a> 
</div> 
</div> 


使 用 CSS 适当 美化 ， 具 体 样式 代码 请 参考 本 节 示 例 源 代码 ， 初 始 预览 效果 如 图 9.8 所 示 。 


O0000000000 





图 9.8 设计 的 灯箱 广告 效果 

1. E[attr] 
选择 具有 attr 属性 的 E 元素。 例如 : 
.nav a[id] {background: blue: color:yellow:font-weight:bold:} | 
上 面 代码 表示 : 选择 divnav 下 所 有 带 有 id 属性 的 a 元素 ， 并 在 这 个 元 素 上 使 用 背景 色 为 蓝 色 ， 
前 景色 为 黄色 ， 字 体 加 粗 的 样式 。 对 照 上 面 的 HTML 结构 ， 不 难 发 现 ， 只 有 第 一 个 和 最 后 一 个 链接 | 
使 用 了 id 属性 ， 所 以 选中 了 这 两 个 a 元素 ， 效 果 如 图 9.9 所 示 。 | 
也 可 以 指定 多 属性 : 


.nav a[hrefl[title] {background: yellow: color:green:} 
上 面 代码 表示 的 是 选择 divnav 下 的 同时 具有 href 和 title 两 个 属性 的 a 元 素 ,效果 如 图 9.10 所 示 。 
ee@ee0000800 [i230@56759@ 
图 9.9 属性 快速 匹配 图 9.10 多 属性 快速 匹配 





2.E [attr="value"] 
选择 具有 attr 属性 ， 且 属性 值 等 于 value 的 EE 元 素 。 例 如 : 
.nav afid="first"] {background: blue: color:yellow:font-weight:bold:} 
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选中 divnav 中 的 a 元 素 ， 且 这 个 元 素 有 一 个 id="first" 属 性 值 ， 则 预览 效果 如 图 9.11 所 示 。 
E[attr="value"] 属 性 选择 器 也 可 以 多 个 属性 并 写 ， 进 一 步 缩小 选择 范围 ， 用 法 如 下 所 示 ， 则 预览 

效果 如 图 9.12 所 示 。 


.nav a[href="#1"][title] fbackground: yellow: color:ereen:} 


9906060069g0 19960606006600 
图 9.11 属性 值 快速 匹配 图 9.12 多 属性 值 快速 匹配 





























3. E[attr~="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 用 空格 分 隔 的 字 词 列表 ， 其 中 一 个 等 于 value 的 EE 元 素 。 包 含有 
一 个 值 ， 且 该 值 等 于 val 的 情况 。 例 如 : 

.nav altitle~="website"] {background:orange:color:green:} 

在 divnav 下 的 a 元 素 的 title 属性 中 ， 只 要 其 属性 值 中 含有 "website" 就 会 被 选择 ， 结 果 a 元 素 中 
“2”“6”“7”“8” 这 四 个 a 元 素 的 title 中 都 含有 ， 所 以 被 选中 ， 如 图 9.13 所 示 。 

4. E[attr^="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 以 value 开头 的 字符 串 的 了 元素。 例如 : 


.nav altitle^="http://"] {backeround:orange:color:green:} 

.nav altitle^="mailto:"] {background:green:color:orange:} 

上 面 代码 表示 的 是 选择 了 以 tile 属性 ， 并 且 以 "http:/" 和 "mailto:" 开 头 的 属性 值 的 所 有 a 元素， 匹 
配 效果 如 图 9.14 所 示 。 

















C000000800@ | O00e00000900 
图 9.13 属性 值 局 部 词 匹 配 图 9.14 匹配 属性 值 开头 字符 串 的 元 素 


5. E[attr$="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 以 value 结尾 的 字符 串 的 王 元 素 。 例 如 : 

.nav a[href$="png"]{background:orange:color:ereen:} 

上 面 代码 表示 选择 divnav 中 元 素 有 href 属性 ， 并 以 为 “png” 结 尾 的 a 元 素 。 

6. E[attr*="value"] 

选择 具有 attr 属性 ， 且 属性 值 为 包含 value 的 字符 串 的 EE 元素。 例如 : 

.nav altitle*="site"] {background:black:color:white:} 

上 面 代码 表示 选择 divnav 中 a 元 素 的 title 属性 中 只 要 有 "site" 字 符 串 就 可 以 。 上 面 样式 的 预览 效 


果 如 图 9.15 所 示 。 


7. E[attr|="value"] 


选择 具有 attr 属性 ,其 值 是 以 value 开头 ,并 用 连接 符 "-" 分 隔 的 字符 串 的 EE 元 素 ; 如果 值 仅 为 value， 
也 将 被 选择 。 例 如 : 





“2 
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nav a[lang|="zh"]{background:gray:coloryellow:} 
上 面 代码 会 选中 div.nav 中 lang 属性 等 于 反 或 以 zh- 开 头 的 所 有 a 元素 ， 如 图 9.16 a 
90990600600 909090600690 


图 9.15 匹配 属性 值 中 的 特定 子 串 图 9.16 ”匹配 属性 值 开 头 字符 串 的 元 素 











9.6 伪 先 择 有 器 


伪 选 择 器 包括 伪 类 选择 器 和 伪 对 象 选择 器 。 伪 选择 器 能 够 根据 元 素 或 对 象 的 特征 、 状 态 、 行为 进 | 
行 匹配 。 

伪 选 择 器 以 冒号 (:〉 作 为 前 级 标识 符 。 冒 号 前 可 以 添加 限定 选择 符 ， 限 定 伪 类 应 用 的 范围 ， 冒 
号 后 为 伪 类 和 伪 对 象 名 ， 冒 号 前 后 没有 空格 。 

CSS 伪 类 选择 器 有 两 种 用 法 方式 : 


回 单纯 式 | 
E:pseudo-class { property:value} | 
其 中 下 为 元 素 , pseudo-class 为 伪 类 名 称 , property 是 CSS 的 属性 , value 为 CSS 的 属性 值 。 例如 : | 
alink {color:red;} 
回 混用 式 
E.class:pseudo-class{property:value} | 


其 中 .class 表示 类 选择 符 。 把 类 选择 符 与 伪 类 选择 符 组 成 一 个 混合 式 的 选择 器 ， 能 够 设计 更 复杂 | 
的 样式 ， 以 精准 匹配 元 素 。 例 如 : 

a.selected:hover {color: blue:} 

CSS3 支持 的 伪 类 选择 器 具体 说 明 如 表 9.1 所 示 ，CSS3 支持 的 伪 对 象 选择 器 具体 说 明 如 表 9.2 
所 示 。 





表 9.1 伪 类 选择 器 列表 


























选 择 器 说 明 
Elink 设置 超 链接 a 在 未 被 访问 前 的 样式 
Evisited 设置 超 链接 a 在 其 链接 地 址 已 被 访问 过 时 的 样式 
E:hover 设置 元 素 在 其 鼠标 悬 停 时 的 样式 
E:active 设置 元 素 在 被 用 户 激活 〈 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 )》 时 的 样式 | 
Efocus 设置 对 象 在 成 为 输入 焦点 时 的 样式 | 
E:lang(fr) 匹配 使 用 特殊 语言 的 EE 元 素 | 
E:not(s) 匹配 不 含有 s 选择 符 的 元 素 E。CSS3 新 增 
Erroot 匹配 EE 元 素 在 文档 的 根 元 素 。 在 HTML 中 ， 根 元 素 永远 是 HIML。CSS3 新 增 


“3 





YA 从 入 门 到 精通 ( 微 梨 精 编 版 ) 

















< 吧 
| NO 
| 续 表 
| 选 择 器 说 明 
| _E:first-child 匹配 父 元 素 的 第 一 个 子 元 素 E。CSS3 新 增 
| _Elastchild 匹配 父 元 素 的 最 后 一 个 子 元 素 E。CSS3 新 增 
E:only-child 匹配 父 元 素 仅 有 的 一 个 子 元 素 E。CSS3 新 增 
E:nth-child(n) 匹配 父 元 素 的 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 
E:nth-last-child(n) ”| 匹配 父 元 素 的 倒数 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 选择 符 无 效 。CSS3 新 增 











E:first-of-type 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:last-of-type, 匹配 同类 型 中 的 最 后 一 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:only-of-type 匹配 同类 型 中 唯一 的 一 个 同 级 兄弟 元 素 E。CSS3 新 增 





E:nth-of-type(n) 匹配 同类 型 中 的 第 n 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:nth-last-of-type(n) | 匹配 同类 型 中 的 倒数 第 n 个 同 级 兄弟 元 素 E。CSS3 新 增 
E:empty 匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 E。CSS3 新 增 


匹配 用 户 界面 处 于 选中 状态 的 元 素 E。 注意 , 用 于 input 的 type 为 radio 与 checkbox 时 。 


E:checked Css3 新 增 

| _Eenabled 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 E。CSS3 新 增 

| _E:disabled 匹配 用 户 界面 上 处 于 禁用 状态 的 元 素 E。CSS3 新 增 

| _E:target 匹配 相关 URL 指向 的 E 元 素 。CSS3 新 增 

| _@page :first 设置 在 打印 时 页 面容 器 第 一 页 使 用 的 样式 注意 ， 仅 用 于 @page 规则 

| _@page Left 设置 页 面容 器 位 于 装订 线 左边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 





| 
| @page :right 设置 页 面容 器 位 于 装订 线 右 边 的 所 有 页 面 使 用 的 样式 。 注 意 ， 仅 用 于 @page 规则 
| 


选 择 器 


E:first-line/E::first-line 


E:before/E::before 


E:after/E::after 


表 9.2 伪 对 象 选 择 器 列表 
说 阴 


E:first-letter/E::first-letter | 设置 对 象 内 的 第 一 个 字符 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 


设置 对 象 内 的 第 一 行 的 样式 。 注 意 ， 仅 作用 于 块 对 象 。CSS3 完善 

设置 在 对 象 前 发 生 的 内 容 。 与 content 属性 一 起 使 用 , 且 必须 定义 content 属性 .CSS3 
完善 

设置 在 对 象 后 发 生 的 内 容 。 与 content 属性 一 起 使 用 ,上 且 必 须 定义 content 属性 .CSS3 
完善 





E::placeholder 


设置 对 象 文字 占 位 符 的 样式 。CSS3 新 增 





E::selection 





设置 对 象 被 选择 时 的 样式 。CSS3 新 增 





由 于 CSS3 伪 选 择 器 众多 ， 下 面 仅 针 对 CSS3 中 新 增 的 伪 类 选择 器 进行 说 明 ， 其 他 选择 器 请 读者 





单 说 明 如 下 所 示 : 


| 参考 CSS3 参考 手册 详细 了 解 。 
| 9.6.1 结构 伪 类 

结构 伪 类 是 根据 文档 结构 的 相互 关系 来 匹配 特定 的 元 素 , 从 而 减少 文档 元 素 的 class 属性 和 ID 属 
性 的 无 序 设置 ， 使 得 文档 更 加 简洁 。 

结构 伪 关 形式 多 样 ， 但 用 法 固定 ， 以 便 设计 各 种 特殊 样式 效果 ， 结 构 伪 类 主要 包括 下 面 几 种 ， 简 


:fist-child: 第 一 个 子 元 素 。 


.174 。 


机 
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:last-child: 最 后 一 个 子 元 素 。 

:nth-child0: 按 正 序 匹配 特定 子 元 素 。 

:nth-last-child0: 按 倒 序 匹配 特定 子 元 素 。 
:nth-of-type0: 在 同类 型 中 匹配 特定 子 元 素 。 
:nth-last-of-type0: 按 倒 序 在 同类 型 中 匹配 特定 子 元 素 。 
:first-of-type: 第 一 个 同类 型 子 元 素 。 

:last-of-type: 最 后 一 个 同类 型 子 元 素 。 

:only-child: 唯一 子 元 素 。 

:only-of-type: 同类 型 的 唯一 子 元 素 。 

:empty: 空 元 素 。 

【示例 1】 下 面 示例 设计 排行 榜 栏目 列表 样式 ， 设 计 效 果 如 图 9.17 


所 示 。 在 列表 框 中 为 每 个 列表 项 定义 相同 的 背景 图 像 。 a 
设计 列表 结构 如 下 : 图 9.17 设计 推荐 栏目 样式 


加 加 图 加 加 图 图 罗 图 加 





<div id="wrap"> 
<ul id="container"> | 
<li><a hre 伍 "#"> 送 君 千里 终 须 一 别 </a></li> | 
<li><a href="#"> 旅 行 的 意义 </a></li> | 
<li><a hre 伍 "#"> 南 师 虽 去 ， 精 神 永 存 </a></li> | 
<li><a href="#'> 榴 莲 糯 米粒 </a></li> | 
<li><a hre 伍 "#"> 阿 尔 及 利 亚 天 命 之 年 </a></li> | 
<li><a hre 全 "#> 白 菜 鸡 肉 粉丝 包 </a></li> | 
<li><a hre 伍 "#">《 展 望 塔 上 的 杀人 》</a></li> | 
<li><a hre 伍 "六 "> 我 们 ， 只 会 在 路 上 相遇 </a></li> | 
<hl> | 
</div> | 


设计 的 列表 样式 请 参考 本 节 示 例 源 代 码 。 下 面 结合 本 示例 分 析 结 构 伪 类 选择 器 的 用 法 。 
1. :first-child 
【示例 2】 如果 设计 第 一 个 列表 项 前 的 图 标 为 1， 且 字体 加 粗 显 示 ， 则 使 用 :first-child 匹配 。 
#wrap li:first-child { 
background-position:2px 10px: | 
font-weight:bold: | 
| 
2. :last-child | 
【示例 3】 如 果 单独 给 最 后 一 个 列表 项 定义 样式 ， 就 可 以 使 用 :last-child 来 匹配 。 
#wrap li:last-child {background-position:2px -277px:} 
显示 效果 如 图 9.18 所 示 。 
3. :nth-child() 
:nth-child0 可 以 选择 一 个 或 多 个 特定 的 子 元 素 。 该 函数 有 多 种 用 法 : 
:nth-child(length): /* 参 数 是 具体 数字 所 
:nth-child(n): /#* 参 数 是 nn 从 0 开始 计算 */ 


“1 


A 


eR 
”nth-child(n*length); 。 ”/*n 的 倍数 选择 ，n 从 0 开始 算 */ 
| ‘nth-child(n+length): /# 选 择 大 于 或 等 于 length 的 元 素 */ 
”nth-childCntlength); 。 /选择 小 于 或 等 于 length 的 元 素 */ 
1 :nth-child(n*length+1); ”/* 表 示 隔 几 选 一 */ 
全 ~ | 在 :nth-child0 函 数 中 ， 参 数 length 为 一 个 整数 ，n 表示 一 个 从 0 开始 的 自然 数 。 
:nth-child0 可 以 定义 值 ， 值 可 以 是 整数 ， 也 可 以 是 表达 式 ， 用 来 选择 特定 的 子 元 素 。 
pte | 【示例 4】 下 面 6 个 样式 分 别 匹配 列表 中 第 2 个 到 第 7 个 列表 项 ， 并 分 别 定义 它们 的 背景 图 像 Y 了 
， 轴 坐标 位 置 ， 显 示 效 果 如 图 9.19 所 示 。 
#wrap li:nth-child(2) { background-position: 2px -31px; } 
#wrap li:nth-child(3) { background-position: 2px -72px: } 
#wrap li:nth-child(4) { background-position: 2px -113px:; } 
#wrap li:nth-child(5) { background-position: 2px -154px: } 
#wrap li:nth-child(6) { background-position: 2px -19Spx: } 
#wrap li:nth-child(7) { background-position: 2px -236px; } 








图 9.18 设计 最 后 一 个 列表 项 样式 图 9.19 设计 每 个 列表 项 样式 
”4 抽 注意 ;这 种 函数 参数 用 法 不 能 引用 负 值 ， 也 就 是 说 ，li:nth-child(-3) 是 不 正确 的 使 用 方法 。 


回 :nth-child(n) 

| 在 :nth-child(n) 中 , n 是 一 个 简单 的 表达 式 ， 它 的 取 值 是 从 0 开始 计算 的 ， 到 什么 时 候 结束 是 不 确 
| 定 的 ， 需 结合 文档 结构 而 定 ， 如 果 在 实际 应 用 中 直接 这 样 使 用 ， 将 会 选中 所 有 子 元 素 。 

| 【示例 5】 在 上 面 示例 中 ， 如 果 在 中 使 用 :nth-child(n)， 那 么 将 选中 所 有 的 二 元 素 。 

| #wrap li:nth-child(n) {text-decoration:underline:} 

| 则 这 个 样式 类 似 于 : 

#wrap li {text-decoration:underline:} 

其 实 ，:nth-child0 是 这 样 计算 的 : 

| n=0: 表示 没有 选择 元 素 。 

n=1: 表示 选择 第 一 个 li。 

n=2: 表示 选择 第 二 个 li。 

依 此 类 推 ， 这 样 下 来 就 选中 了 所 有 的 1i。 

:nth-child(2n) 

【示例 6】:nth-child(2n) 是 :nth-child(n) 的 一 种 变 体 ， 使 用 它 可 以 选择 n 的 2 倍数， 当然 ， 其 中 的 2 
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可 以 换 成 需要 的 数字 ， 分 别 表 示 不 同 的 倍数 。 
#wrap li:nth-child(2n) {font-weight:bold:} 
等 价 于 : 

#wrap li:nth-child(even) {font-weight:bold:} 

预览 效果 如 图 9.20 所 示 。 | 
来 看 一 下 其 实现 过 程 : | 
当 n=0， 则 2n=0， 表 示 没 有 选中 任何 元 素 ; | 
当 n=1， 则 2n=2， 表 示 选 择 了 第 2 个 li 
当 n=2， 则 n= 二 4， 表 示 选 择 了 第 4 个 i。 





依 此 类 推 。 
如 果 是 29， 则 与 使 用 even 命名 class 定义 样式 所 起 到 的 效果 是 一 样 的 。 
:nth-child(2n-1) 


【示例 7】:nth-child(2n-1) 这 个 选择 器 是 在 :nth-child(2n) 基 础 上 演变 来 的 ， 既 然 :nt 了 h-child(2n) 表 示 | 
选择 偶数 ， 那 么 在 它 的 基础 上 减 去 1 就 变 成 奇数 选择 。 
#wrap li:nth-child(2n-1) {font-weight:bold:} 
等 价 于 : 
#wrap li:nth-child(odd) {font-weight:bold:} 
来 看 看 其 实现 过 程 : 
当 n=0， 则 2n-1=-1， 表 示 也 没有 选中 任何 元 素 ; 
当 n=1， 则 2n-1=1， 表 示 选 择 第 1 个 li; 
当 n=2， 则 2n-1=3， 表 示 选 择 第 3 个 li。 
依 此 类 推 。 
其 实 ， 还 可 以 使 用 :nth-child(2n+1) 和 :nth-child(odd) 来 实现 这 种 奇数 效果 。 | 
:nth-child(n+5) | 
【示例 8】:nth-child(n+5) 这 个 选择 器 是 从 第 5 个 子 元 素 开始 选择 。 | 
li:nth-child(n+5) {font-weight:bold:} 
其 实现 过 程 如 下 : | 
当 n=0， 则 n+5-5， 表 示 选 中 第 5 个 li; | 
当 n=1， 则 n+5=6， 表 示 选 择 第 6 个 li。 | 


依 此 类 推 。 
可 以 使 用 这 种 方法 选择 需要 开始 选择 的 元 素 位 置 ， 也 就 是 说 ， 换 了 数字 ， 起 始 位 置 就 变 了 。 | 
:nth-child(-n+5) | 


【示例 9】:nth-child(-n+5) 选 择 器 刚好 和 :nth-child(n+5) 选 择 器 相反 ， 这 个 是 选择 第 5 个 前 面 的 子 | 
元 素 。 | 
li:nth-child(-n+5) {font-weight:bold:} 
其 实现 过 程 如 下 : 
当 mn=0， 则 -n+5=5， 表 示 选 择 了 第 5 个 li; 


"i 


a A 


| 当 王 1， 则 -n+5=4， 表 示 选 择 了 第 4 个 i 

| 当 n=2， 则 -n+5=3， 表 示 选 择 了 第 3 个 li 

| 当 w3， 则 -nt5-2， 表 示 选 择 了 第 2 个 li; 
| 当 n=4， 则 -n+5=1， 表 示 选 择 了 第 1 个 fi; 
| 当 n=5， 则 -nt+5=0， 表 示 没 有 选择 任何 元 素 。 
Note | :nth-child(Sn+1) 
:nth-child(Sn+1) 选 择 器 是 实现 隔 几 选 一 的 效果 。 

【示例 10〗】 如 果 是 隔 三 选 一 ， 则 定义 的 样式 如 下 

li:nth-child(3n+1) {font-weight:bold:} 
其 实现 过 程 如 下 : 
当 n=0， 则 3ntl=1， 表 示 选 择 了 第 1 个 li; 
当 n=1， 则 3ntl=4， 表 示 选 择 了 第 4 个 li 
当 n=2， 则 3n+1=7， 表 示 选 择 了 第 7 个 1i。 
设计 效果 如 图 9.21 所 示 。 
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示例 效果 图 9.20 设计 偶数 行列 表 项 样式 图 9.21 设计 隔 三 选 一 行列 表 项 样式 

4. :nth-last-childO 

【示例 11】:nth-last-child0 选 择 器 与 :nth-child0 相 似 ， 但 作用 与 :nth-child0 不 一 样 ，:nth-last-child0 
只 是 从 最 后 一 个 元 素 开 始 计算 来 选择 特定 元 素 。 

liznth-last-child(4) {font-weight:bold:} 

上 面 代码 表示 选择 倒数 第 4 个 列表 项 。 

其 中 :nth-last-child(1) 和 :last-child 所 起 作用 是 一 样 的 ， 都 表示 选择 最 后 一 个 元 素 。 

另外 ，:nth-last-childO) 与 :nth-child0 用 法 相同 ， 可 以 使 用 表达 式 来 选择 特定 元 素 ， 下 面 来 看 几 个 特 
殊 的 表达 式 所 起 的 作用 : 

:nth-last-child(2n) 表 示 从 元 素 后 面 计算 ， 选 择 的 是 偶数 个 数 ， 从 而 反 过 来 说 就 是 选择 元 素 的 奇数 ， 
与 前 面 的 :nth-child(2n+1)、:nth-child(2n-1)、:nth-child(odd) 所 起 的 作用 是 一 样 的 。 例 如 : 

liznth-last-child(2n) { font-weight:bold:} 
] li:nth-last-child(even) {font-weight:bold:} 
| 
| 等 价 于 : 
| liznth-child(2n+1) {font-weight:bold:} 
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li:nth-child(2n-1) {font-weight:bold:} 
Tinth-child(odd) {font-weight:bold:} | 
| 
th-lastrehild(2n-D) 选 择 器 刚好 与 上 面 的 相反 ,从 后 面 计算 选择 的 是 奇数 ， 而 从 前 面 计算 选择 的 就 | 
是 偶数 位 了 。 例 如 : | 





li-nth-last-child(2n+1) {font-weight:bold:} 


liznth-last-child(2n-1) {font-weight:bold:} 


Ticnth-last-child(odd) {font-weight:bold:} | 
等 价 于 : | 
Tienth-child(2n) {font-weight:bold:} | 
li:nth-child(even) {font-weight:bold:} | 
总 之 ，:nth-lastchild0 和 nth-child0 的 计算 方法 是 一 样 的 ， 只 不 过 它们 的 区 别 是 ，:nth-child0 是 从 
元 素 的 第 一 个 开始 计算 ， 而 :nth-last-child0 是 从 元 素 的 最 后 一 个 开始 计算 。 | 
| 
5. :nth-of-typeO 
:nth-of-typeO 类 似 :nth-child0， 不 同 的 是 它 只 计算 选择 器 中 指定 的 那个 元 素 。 | 
【示例 12】 在 div#wrap 中 包含 有 很 多 p、li、img 等 元 素 ， 但 现在 只 需要 选择 p 元 素 ， 并 让 它 每 | 
隔 一 个 p 元 素 就 有 不 同 的 样式 ， 那 就 可 以 简单 地 写成 : | 
div#wrap p:nth-of-type(even) { font-weight:bold:} 
其 实 这 种 用 法 与 :nth-child0 是 一 样 的 ， 也 可 以 使 用 :nth-child0 的 表达 式 来 实现 ， 唯 不同 的 
是 :nth-of-type0 指 定 了 元 素 的 类 型 。 
6. :nth-last-of-typeO) | 
:nth-lastoftype() 与 :nth-lastchildO 用 法 相同 ， 但 它 指定 了 子 元 素 的 类 型 ， 除 此 之 外 ， 语 法 形式 和 | 
用 法 基本 相同 。 
7. :first-of-type 和 :last-of-type 
:first-of-type 和 :last-of-type 这 两 个 选择 器 类 似 于 :first-child 和 :last-child, 不 同 之 处 就 是 它们 指定 了 
元 素 的 类 型 。 
8. :only-child 和 :only-of-type 
:only-child 表示 的 是 一 个 元 素 是 它 的 父 元 素 的 唯一 一 个 子 元 素 。 | 
【示例 13】 在 文档 中 设计 如 下 HTML 结构 。 | 
<div class="post"> | 
<p> 第 一 段 文 本 内 容 </p> 
<p> 第 二 段 文本 内 容 </p> 
</div> | 
<div class="post"> | 
<p> 第 三 段 文本 内 容 </p> | 
</div> 
如 果 需 要 在 divpost 只 有 一 个 p 元 素 的 时 候 改变 这 个 p 的 样式 ， 那 么 现在 就 可 以 使 用 :only-child 
-postp {font-weight:bold:} 
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.post p:only-child {background: red:} 

此 时 divpost 只 有 一个 子 元 素 p， 它 的 背景 色 将 会 显示 为 红色 。 

:only-oftype 表示 一 个 元 素 包含 有 很 多 个 子 元 素 ， 而 其 中 只 有 一 个 子 元 素 是 唯一 的 ， 那 么 使 用 这 
a 种 选择 方法 就 可 以 选中 这 个 唯一 的 子 元 素 。 例 如 : 


<div class="post"> 
Ran 
| <p> 文 本 段 <p> 
<div> 子 块 二 </div> 
</div> 
如 果 只 想 选择 上 面 结 构 块 中 的 p 元 素 ， 就 可 以 这 样 写 : 


.post p:only-of-type {background-color:red:} 


9. :empty 
:empty 是 用 来 选择 没有 任何 内 容 的 元 素 ， 这 里 没有 内 容 指 的 是 一 点 内 容 都 没有 ， 包 括 空格 。 
【示例 14】 这 里 有 3 个 段落 ， 其 中 一 个 段落 什么 都 没有 ， 完 全 是 空 的 : 
<div class="post"> 
<p> 第 一 段 文本 内 容 </p> 
<p> 第 二 段 文本 内 容 </p> 
</div> 
| <div class="post"> 
| <p> <p> 
| </div> 
如 果 想 设计 这 个 p 不 显示 ， 那 就 可 以 这 样 来 写 : 
-postpiempty {display: none:} 


:9.6.2 否定 伪 类 





:not0 表 示 否 定 选择 器 , 即 过 滤 掉 notO 函 数 匹配 > 
的 特定 元 素 。 虞 美人 .在 花 秋月 何 时 了 





| 

| 【示例 】 下 面 示例 为 页 面 中 所 有 段落 文本 设置 李 担 

| 字体 大 小 为 24 像素 ， 然 后 使 用 :aotCanthon 排 出 第 | erree at ae 

| 一 段 文本 ， 设 置 其 他 段落 文本 的 字体 大 小 为 14 像 

| 素 ， 显 示 效果 如 图 9.22 所 示 。 图 9.22 ”否定 伪 类 的 应 用 
<style type="text/css"> 


| 
| 
| P { font-size: 24px: } 
| Pp:not(.author) { font-size: 14px: } 
</style> 
<h2> 虞 美人 。 春 花 秋月 何 时 了 </h2> 
| <p class="author"> 李 煜 </p> 
| <p> 春 花 秋月 何 时 了 ? 往事 知 多 少 。 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。 </p> 
| <p> 雕 栏 玉 砌 应 犹 在， 只 是 朱 颜 改 。 问 君 能 有 几 多 愁 ? 恰似 一 江 春 水 向 东 流 。 </p> 
| 
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9.6.3 ”状态 伪 类 
CSS3 包含 3 个 UI 状态 伪 类 选择 器 ， 简 单 说 明 如 下 : 




















:enabled: 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 
:disabled: 匹配 指定 范围 内 所 有 不 可 用 UI 元 素 。 
:checked: 匹配 指定 范围 内 所 有 可 用 UI 元 素 。 





志方 





Note 
【示例 】 下 面 示例 设计 一 个 简单 的 登录 表单 ， 效 果 如 图 9.23 所 示 。 在 实际 应 用 中 ， 当 用 户 登录 Rrrae 
完毕 ,不 妨 通过 脚本 把 文本 框 设置 为 不 可 用 (disabled="disabled") 状态 ， 这 时 可 以 通过 :disabled 选择 | 

器 让 文本 框 显示 为 灰色 ， 以 告诉 用 户 该 文本 框 不 可 用 了 ， 这 样 就 不 用 设计 “不 可 用 ”样式 类 ， 并 把 该 | 























类 添加 到 HTML 结构 中 。 
© © CI gm Be 
ss 尽 不 可 用 | 
图 9.23 设计 登录 表单 样式 
【操作 步骤 】 


第 1 步 ， 新 建 一 个 文档 ， 在 文档 中 构建 一 个 简单 的 登录 表单 结构 。 


<form action="#"> 
<label for="usermame"> 用 户 名 </label> 
<input type="text" name="username" id="usemame" /> 
<input type="text" name="usermmame1" disabled="disabled" value=" 不 可 用 " /> 
<label for="password"> 密 码 </label> 
<input type="password" name="password" id="password"” /> 
<input type="password" name="password1" disabled="disabled" value=" 不 可 用 "” 亡 
<input type="submit" value=" 提 交 " /> 
</form> 





在 这 个 表单 结构 中 ， 使 用 HTML 的 disabled 属性 分 别 定 义 了 两 个 不 可 用 的 文本 框 对 象 。 


第 2 步 ， 内 建 一 个 内 部 样式 表 ， 使 用 属性 选择 器 定义 文本 框 和 密码 域 的 基本 样式 。 


input[type="text"], input[type="password"] { 
border: 1px solid #0f0:; 


第 3 步 ， 利 用 属性 选择 器 分 别 为 文本 框 和 密码 域 定义 内 嵌 标 识 图 标 。 


inputltype="text"] { backeround:url(imagesiname.gif) no-repeat 2px 2px: } 
inputltype="password"] { background:url(images/password.gif) no-repeat 2px 2px; } 


第 4 步 , 使 用 状态 伪 类 选择 器 , 定义 不 可 用 表单 对 象 显示 为 灰色 , 以 提示 用 户 该 表单 对 象 不 可 用 。 


-1s 


a 
| 





< Pomst esss tyeasnn 从 入 门 到 精通 ( 微 课 精 编 县 ) 


input[type="text"]:disabled { 
backeround:#ddd url(images/name]1 .gif) no-repeat 2px 2px: 
border: 1px solid #bbb:} 

input[type="password"]:disabled { 
background:#ddd url(images/password]1 .gif) no-repeat 2px 2px: 
border: 1px solid #bbb:} 


9.6.4 目标 伪 类 


目标 伪 类 选择 器 类 型 形式 如 E:target, 它 表 示 选 择 匹 配 E 的 所 有 元 素 ,， 且 匹配 元 素 被 相关 URL 指 


。 该 选择 器 是 动态 选择 器 ， 只 有 当 存 在 URL 指向 该 匹配 元 素 时 ， 样 式 效果 才 有 效 。 


【示例 】 下 面 示例 设计 当 单 击 页 面 中 的 锚 点 链接 ， 跳 转 到 指定 标题 位 置 时 ， 该 标题 会 自动 高 亮 显 


， 以 提醒 用 户 当 前 跳 转 的 位 置 ， 效 果 如 图 9.24 所 示 。 


<style type="text/css"> 

谨 设计 导航 条 固定 在 窗口 右上 角 位 置 显示 */ 

hl{ position:fixed: right: 12px; top:24px:} 

让 让 锚 点 链接 堆 又 显示 */ 

hl af display:block:} 

谨 设计 锚 点 链接 的 目标 高 亮 显示 */ 

h2:target { background:hsla(93,9696.6296.1.00): } 

</style> 

<h1><a hre 伍 "#p1"> 图 片 1</a> <a hre 伍 "#p2"> 图 片 2</a> <a hre 伍 "#p3"> 图 片 3</a> <a hre 伍 "#p4"> 图 片 4</a> 


</hl> 


<h2 id="pl"> 图 片 1</h2> 
<p><img ste="images/1 .jpg" /></p> 
<h2 id="p2"> 图 片 2</h2> 
<p><img ste="images/2.jpg" /></p> 
<h2 id="p3"> 图 片 3</h2> 
<p><img SIc="images/3.jpg" /></p> 
<h2 id="p4"> 图 片 4</h2> 
<p><img sre="images/4:jpg" /></p> 




















图 9.24 目标 伪 类 样式 应 用 效果 
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9.7 CSS 特性 


CSS 样式 具有 两 个 特性 : 继承 性 和 层 肝 性 ， 下 面 分 别 进行 说 明 。 
9.7.1 CSS 继承 性 


CSS 继承 性 是 指 后 代 元 素 可 以 继承 祖先 元 素 的 样式 。 继 承 样式 主要 包括 字体 、 文 本 等 基本 属性 ， 
如 字体 、 字 号 、 颜色、 行距 等 ， 对 于 下 面 类 型 属性 是 不 允许 继续 的 : 边框 、 边 界 、 补 白 、 背 景 、 定 位 、 
布局 、 尺 寸 等 。 
净 提示 : 灵活 应 用 CSS 继承 性 ， 可 以 优化 CSS 代码 ， 但 是 继续 的 样式 的 优先 级 是 最 低 的 。 

【示例 】 下 面 示例 在 body 元 素 中 定义 整个 页 面 的 字体 大 小 、 字 体 颜色 等 基本 页 面 属 性 ， 这 翌 包 | 
会 在 body 元 素 内 的 其 他 元 素 都 将 继承 该 基本 属性 ， 以 实现 页 面 显 示 效果 的 统一 。 

新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 代码 ， 设 计 一 个 多 级 嵌 套 结构 。 

<div id="wrap"> 

<div id="header"> 
<div id="menu"> 





| 
| 
</div> | 
<div id="main"> | 
<p> 主 体内 容 </p> 
</div> 
</div> 

在 <head> 标 签 内 添加 <style type="text/ess"> 
标签 ， 定 义 内 部 样式 表 ， 然 后 为 body 定义 字体 大 
小 为 12 像素 ， 通 过 继承 性 ， 包 含 在 body 元 素 的 
所 有 其 他 元 素 都 将 继承 该 属性 ， 并 显示 包含 的 字 
体 大 小 为 12 像素 。 在 浏览 器 中 预览 ， 显 示 效 果 如 





| 
图 9.25 所 示 。 9.25 ”CSS 继承 性 演示 效果 | 
body {font-size: 12px:} | 


9.7.2 CSS 层 又 性 
CSS 层 破 性 是 指 CSS 能 够 对 同一 个 对 象 应 用 多 个 样式 的 能 力 。 
【示例 1】 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 代码 。 
<div id="wrap"> 看 看 我 的 样式 效果 </div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 分 别 添加 两 个 样式 : 


| 
div {font-size:12px:} | 
div {font-size: 14px:} LU 
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| 两 个 样式 中 都 声明 相同 的 属性 ， 并 应 用 于 同一 个 元 素 上 。 在 浏览 器 中 测试 ， 则 会 发 现 最 后 字体 显 
| 示 为 14 像素 ， 也 就 是 说 ，14 像素 字体 大 小 覆盖 了 12 像素 的 字体 大 小 ， 这 就 是 样式 层 琶 。 
| 当 多 个 样式 作用 于 同一 个 对 象 ， 则 根据 选择 器 的 优先 级 ， 确 定 对 象 最 终 应 用 的 样式 。 
标签 选择 器 : 权重 值 为 1。 
伪 元 素 或 伪 对 象 选 择 器 : 权重 值 为 1。 
类 选择 器 : 权重 值 为 10。 
属性 选择 器 : 权重 值 为 10。 
ID 选择 器 : 权重 值 为 100。 
其 他 选择 器 : 权重 值 为 0， 如 通 配 选 择 器 等 。 
然后 ， 以 上 面 权 值 数 为 起 点 来 计算 每 个 样式 中 选择 器 的 总 权 值 数 。 计 算 规则 是 : 
统计 选择 器 中 ID 选择 器 的 个 数 ， 然 后 乘 以 100。 
统计 选择 器 中 类 选择 器 的 个 数 ， 然 后 乘 以 10。 
回 ”统计 选择 器 中 的 标签 选择 器 的 个 数 ， 然 后 乘 以 1。 
以 此 方法 类 推 ， 最 后 把 所 有 权重 值 数 相 加 ， 即 可 得 到 当前 选择 器 的 总 权重 值 ， 最 后 根据 权重 值 来 
， 决定 哪个 样式 的 优先 级 大 。 
【示例 2】 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 如 下 代码 。 


<div id="box" class="red">CSS 选择 器 的 优先 级 </div> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 添 加 如 下 样式 。 
body divybox { border:solid 2px red:} 


办 办 办 办 多国 





#box {border:dashed 2px blue:} 
对 于 上 面 的 样式 表 ， 可 以 这 样 计算 它们 的 权重 值 : 

body div#box = 1+ 1+100= 102; Se cm 
#box = 100 


dired=1+10=11 
| 因此 ， 最 后 的 优先 级 为 body div#box 大 于 #box，#box 大 
| 于 dired。 所 以 可 以 看 到 显示 效果 为 2 像素 宽 的 红色 实 线 , 在 
| 浏览 器 中 预览 ， 显 示 效 果 如 图 9.26 所 示 。 9.26 CSS 优先 级 的 样式 演示 效果 
| 区 提示 : 与 样式 表 中 样式 相 比 ， 行 内 样式 优先 级 最 高 ; 相同 权重 值 时 ， 样 式 最 近 的 优先 级 最 高 ; 使 
| 用 !important 命令 定义 的 样式 优先 级 绝对 高 ; !important 命令 必须 位 于 属性 值 和 分 号 之 间 ， 
如 元 eader{fcolorRedlimportant}， 否 则 无 效 。 


| 9.8 在 线 练 习 


| 
| 
| 
| 
| 
| diwaed fborderdouble 3px red:} 
| 
| 
| 
| 
| 





| 本 节 提 供 了 两 个 在 线 练习 : (1) CSS 基础 ; (2) CSS 选择 器 。 感 兴趣 的 读者 可 以 扫 码 练习 ， 以 便 
| 灵活 使 用 CSS， 强化 基本 功 训练 。 
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第 几 谭 
使 用 CSS3 美化 网 页 文本 和 图 像 


人 第 衣装， 网 页 也 需要 修饰 ，CSS3 为 字体 和 文本 提供 了 大 量 的 属性 ， 如 字体 的 类 型 、 大 小 
和 颜色 等 ， 文 本 的 对 齐 、 间 距 、 缩 进 和 行 高 等 。 本 章 将 重点 讲解 CSS3 字体 和 文本 样式 。 由 于 
文本 与 图 片 在 网 页 中 紧密 排版 在 一 起 ， 本 章 还 介绍 图 片 的 常用 样式 设计 


【学 习 要 点 】 

WH 定义 字体 类 型 、 大 小 、 颜 色 等 基本 样式 
设计 文本 基本 版 式 ， 如 对 齐 、 行 高 、 间 距 等 
设计 图 片 的 基本 样式 

能 够 灵活 设计 美观 、 实 用 的 图 文 版 式 


总 总 吾 


A 





10.1 设计 字体 样式 


字体 样式 包括 类 型 、 大 小 、 颜 色 、 粗 细 、 下 划 线 、 和 斜体 、 大 小 写 等 。 下 面 分 别 进行 介绍 。 


回 10.1.1 定义 字体 类 型 

| 使 用 font-family 属性 可 以 定义 字体 类 型 ， 用 法 如 下 : 

| font-family : name 

| name 表示 字体 名 称 ， 可 以 设置 字体 列表 ， 多 个 字体 按 优先 顺序 排列 ， 以 逗号 隔 开 。 

| 如 果 字 体 名 称 包 含 空 格 ， 则 应 使 用 引号 括 起 。 第 二 种 声明 方式 使 用 所 列 出 的 字体 序列 名 称 ， 如 果 
| 使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 

| 【示例 】 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test1.html， 在 <body> 标 签 内 输入 两 行 段落 
| 文本 。 
| <p> 月 沙包 旷 赴 满 天 ， 江 枫 渔 火 对 悉 眠 。 </p> 

<p> 姑 苏 城 外 寒山 寺 ， 夜 半 钟 声 到 客船 。</p> 

| 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样 式 ， 用 
| 来 定义 网 页 字体 的 类 型 。 

Pp {/* 段落 样式 */ 

font-family: "隶书 ": # 隶书 字体 */ 






在 浏览 器 中 预览 效果 如 图 10.1 所 示 。 

容 提示 : 在 网 页 设计 中 ， 没 有 中 文通 用 字体 类 型 ， 中 文字 体 的 表现 力 比 较 弱 ， 即 使 存在 各 种 艺术 字 
体 ， 但 是 考虑 到 用 户 系统 的 支持 率 ， 很 少 被 广泛 使 用 。 一 般 中 文 网 页 字体 默认 多 为 宋体 ， 
对 于 标题 或 特殊 提示 信息 ， 如 果 需 要 特殊 字体 ， 则 建议 采用 图 像 形式 间接 实现 。 
拉丁 字体 类 型 比较 丰富 , 通用 字体 的 选择 余地 大 、 艺 术 表 现 力 强 ， 在 浏览 外 文 网 站 时 用 户 
会 发 现 页 面 选用 的 字体 类 型 就 丰富 很 多 。 习 惯 上 ， 标 题 都 使 用 无 衬 线 字体 、 艺 术 字体 或 手 
写 体 等 ， 而 网 页 正文 则 多 使 用 衬 线 字体 等 。 

【拓展 】 

如 果 读 者 想 要 更 深入 地 了 解 网 页 字体 类 型 的 设计 方法 ， 请 扫 码 阅读 。 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


x 
PS napynocalhostrestd - BO | Glocalhost 


月 落 乌 喻 箱 满 天 ， 江 要 他 火 对 恶 眠 - 


结 苏 城 外 室 山 伟 ， 夜 半 钟 产 到 客船- 





10.1 设计 隶书 字体 效果 
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10.1.2 ”定义 字体 大 小 


使 用 CSS3 的 font-size 属性 可 以 定义 字体 大 小 ， 用 法 如 下 : 
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length 


其 中 ，xx-small (最 小 )、x-small ( 较 小 )、small (小 )、medium (正常 )、large (大 )、x-large( 较 | 
大 )、xx-large (最大) 表示 绝对 字体 尺寸 ， 这 些 特 殊 值 将 根据 对 象 字体 进行 调整 。 

larger ( 增 大 ) 和 smaller (减少 ) 这 对 特殊 值 能 够 根据 父 对象 中 字体 尺寸 进行 相对 增 大 或 者 缩小 | 
处 理 ， 使 用 成 比例 的 em 单位 进行 计算 。 

length 可 以 是 百分数 ， 或 者 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 但 不 可 为 负 值 。 其 百分比 取 值 | 
是 基于 父 对 象 中 字体 的 尺寸 来 计算 ， 与 em 单位 计算 相同 。 

【示例 】 下 面 示例 演示 如 何 为 网 页 定义 字体 大 小 。 

启动 Dreamweaver， 新 建 一 个 网 页 ， 保存 为 test.html， 在 <head> 标 签 内 添加 <style type="text/css"> 
标签 ， 定 义 一 个 内 部 样式 表 。 

然后 输入 下 面 样式 ， 分 别 设置 网 页 字体 默认 大 小 、 正 文字 体 大 小 和 栏目 中 字体 大 小 : 





ER 六 以 像素 为 单位 设置 字体 大 小 */ 
p {font-size:0.75em:} 庆 以 父辈 字体 大 小 为 参考 设置 大 小 */ | 
div {font:9pt Arial, Helvetica, sans-serif:} 局 以 点 为 单位 设置 字体 大 小 */ | 

【拓展 】 


如 果 读 者 想 要 更 深入 地 了 解 网 页 字体 大 小 的 设计 方法 , 以 及 各 种 单位 的 选择 
技巧 ， 请 扫 码 阅读 。 


10.1.3 ”定义 字体 颜色 
使 用 CSS3 的 color 属性 可 以 定义 字体 颜色 ， 用 法 如 下 : 


color : color 


参数 color 表示 颜色 值 ， 取 值 包括 颜色 名 、 十 六 进 制 值 、RGB 等 颜色 函数 ,详细 说 明 请 参考 CSS3 
参考 手册 ， 或 者 扫 码 了 解 更 详细 的 内 容 。 

【示例 】 下 面 示例 演示 了 在 文档 中 定义 字体 颜色 。 

启动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <head> 标 签 内 添 
加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 

然后 输入 下 面 样式 ， 分 别 定义 页 面 、 段 落 文本 、<div> 标 签 、<span> 标 签 包 
含 字体 颜色 。 





body { color:gray:} 证 使 用 颜色 名 */ 
Pp { color#666666:} 从 使 用 十 六 进 制 *#/ 
div { colorrgb(120.120.120):} 谍 使 用 RGB 所 
span { colorreb(50%.50%.500%):} /* 使 用 RGB */ 


10.1.4 “定义 字体 粗细 


使 用 CSS3 的 font-weight 属性 可 以 定义 字体 粗细 ， 用 法 如 下 : 
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
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Eee ee 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| 
| 其 中 , normal 为 默认 值 , 表示 正常 的 字体 , 相当 于 取 值 为 400。 bold 表示 粗 体 , 相当 于 取 值 为 700， 
| 或 者 使 用 <b > 标签 定义 的 字体 效果 。 
| bolder 〈 较 粗 ) 和 lighter 〈 较 细 ) 相对 于 normal 字体 粗细 而 言 。 
僵 和 五 | 另外 ， 也 可 以 设置 值 为 100、200、300、400、500、600、700、800、900， 它 们 分 别 表 示 字 体 的 
| 粗细， 是 对 字体 粗细 的 一 种 量化 方式 ， 值 越 大 就 表示 越 粗 ， 相 反 就 表示 越 细 。 
【示例 】 新 建 testhtml 文档 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 分 别 定义 段落 文本 、 一 
| 级 标题 、<div> 标 签 包 含 字体 的 粗细 效果 ， 同 时 定义 一 个 粗 体 样式 类 。 


| Pp { font-weight: normal } /# 等 于 400 */ 

| hl { font-weight: 700 } 上 * 等 于 bold*/ 

| div{ font-weight: bolder } 人 #* 可 能 为 500 */ 

| ‘bold {font-weight:bold:} 证 粗 体 样式 类 */ 
| 


”<《 乓 注意 : 设置 字体 粗细 也 可 以 称 为 定义 字体 的 重量 。 对 于 中 文 网 页 设计 来 说 ,一 般 仅 用 到 bold (加 
| 粗 ) 、normal (普通 ) 两 个 属性 值 。 


| 10.1.5 ”定义 艺术 字体 





| 使 用 CSS3 的 font-style 属性 可 以 定义 字体 倾斜 效果 ， 用 法 如 下 : 

| font-style : normal | italic | oblique 

| 其 中 ,normal 为 默认 值 ,表示 正常 的 字体 ,italic 表示 斜体 ;oblique 表示 倾斜 的 字体 。italic 和 oblique 
| 两 个 取 值 只 能 在 英文 等 西方 文字 中 有 效 。 

| 【示例 】 新 建 test.html 文档 ， 输 入 下 面 样式 ， 定 义 一 个 斜体 样式 类 。 

italic {/* 斜体 样式 类 */ 

| font-style:italic: 

| } 

| 

| 在 <body> 标 签 中 输入 两 段 文 本 ， 并 把 斜体 样式 类 应 用 到 其 中 一 段 文本 中 。 


| <> 知 我 者 ， 谓 我 心 忱 ， 不 知 我 者 ， 谓 我 何 求 。 </p> 
”<p dass="italic"> 君 子 坦荡 荡 ， 小 人 长 威 威 。</p> 
| 
| 


最 后 在 浏览 器 中 预览 ， 比 较 效果 如 图 10.2 所 示 。 


知 芒 者 ， 亩 拒 心 知 我 者 ， 朝 我 何 求 - 


吾 元 名 形 尺 ， 人 办 人 厂 必 于 - 





10.2 ”比较 正常 字体 和 斜体 效果 
10.1.6 “定义 修饰 线 


使 用 CSS3 的 text-decoration 属性 可 以 定义 字体 修饰 线 效果 ， 用 法 如 下 : 
text-decoration : none || underline || blink || overline || line-through 
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其 中 ,normal 为 默认 值 ,表示 无 装饰 线 ,blink 表 示 闪 烁 效果 ,underline 表示 下 划 线 效果 ,line- Le 
表示 贯穿 线 效 果 ，overline 表示 上 划 线 效果 。 


【操作 步骤 】 
第 1 步 ， 新 建 testhtml 文档 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样 
第 2 步 ， 输 入 下 面 样式 ， 定 义 3 个 装饰 字体 样式 类 。 
Anderline {text-decoration:underline:} 目下 划 线 样式 类 */ 
.overline {text-decoration:overline:} /# 上 划 线 样式 类 *#/ 
.line-through {text-decoration:line-through:} 证 删除 线 样式 类 */ 


第 3 步 ， 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 的 装饰 类 样式 。 


<p class="underline"> 昨 夜 西风 凋 珀 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> 
<p class="overline"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 慌 尽 </p> 
<p class="line-through"> 众 里 寻 他 千百度 ， 暮 然 回 首 ， 那 人 却 在 灯火 阑珊 处 </p> 


第 4 步 ， 再 定义 一 个 样式 ， 在 该 样式 中 同时 声明 多 个 装饰 值 ， 定 义 的 样式 如 下 : 
‘line { text-decoration:line-through overline underline: } 

第 5 步 ， 在 正文 中 输入 一 行 段落 文本 ， 并 把 这 个 line 样式 类 应 该 到 该 行文 本 中 。 
<p class="line"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 。</p> 

第 6 步 ， 在 浏览 器 中 预览 ， 多 种 修饰 线 比较 效果 如 图 10.3 所 示 。 


Sa) S pocahost 0s - sc| ssxezx 








10.3 多 种 修饰 线 的 应 用 效果 


这 提示 : CSS3 增强 text-decoration 功能 ， 新 增 如 下 5 个 子 属性 。 


加 加 


关于 这 些 子 属性 的 详细 取 值 说 明和 用 法 ， 请 参考 CSS3 参考 手册 。 由 于 目 放大 部 分 浏览 条 不 


text-decoration-line: 设置 装饰 线 的 位 置 ， 取 值 包括 none (无 ) 、underline、overline、 


line-through、 blink. 
text-decoration-color: 设置 装饰 线 的 颜色 。 

text-decoration-style: 设置 装饰 线 的 形状 ， 取 值 包括 solid、double、dotted、dashed、 
wavy (波浪 线 ) 。 

text-decoration-skip: 设置 文本 装饰 线条 必须 略 过 内 容 中 的 哪些 部 分 。 
text-underline-position: 设置 对 象 中 的 下 划 线 的 位 置 。 


持 这 些 子 属性 ， 可 以 暂时 忽略 。 
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使 用 CSS3 的 font-variant 属性 可 以 定义 字体 的 变 体 效 果 ， 用 法 如 下 : 
font-variant : normal | small-caps 
其 中 ，normal 为 默认 值 ， 表 示 正 常 的 字体 ，small-caps 表示 小 型 的 大 写字 母 字 体 。 
【示例 】 新 建 test.html 文档 ， 在 内 部 样式 表 中 定义 一 个 类 样式 。 
| .small-caps {/* 小 型 大 写字 母 样式 类 */ 
font-variant'small-caps:} 
然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 上 面 定义 的 类 样式 。 
<p class="small-caps">font-variant </p> 
| 4 角 注意 :font-variant 仅 支持 拉丁 字体 ， 中 文字 体 没有 大 小 写 效果 区 分 。 如 果 设置 了 小 型 大 写字 体 ， 
但 是 该 字体 没有 找到 原始 小 型 大 写字 体 ， 则 浏览 器 会 模拟 一 个 。 例如， 可 通过 使 用 一 个 常 
规 字体 ， 并 将 其 小 写字 母 替换 为 缩小 过 的 大 写字 母 。 





“10.1.8 ”定义 大 小 写字 体 


使 用 CSS3 的 text-transform 属性 可 以 定义 字体 大 小 写 效果 。 用 法 如 下 : 

text-transform : none | capitalize | uppercase | lowercase 

| 其 中 ，none 为 默认 值 ， 表 示 无 转换 发 生 ，capitalize 表示 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 
| 其 余 无 转换 发 生 ; uppercase 表示 把 所 有 字母 都 转换 成 大 写 ; lowercase 表示 把 所 有 字母 都 转换 成 小 写 。 

【示例 】 新 建 testhtml 文档 ， 在 内 部 样式 表 中 定义 3 个 类 样式 。 


.capitalize ftext-transform:capitalize:} /* 首 字母 大 小 样式 类 */ 

.uppercase {text-transfonm:uppercase;} /* 大 写 样式 类 */ 

.lowercase {text-transform:lowercase:} /* 小 写 样式 类 */ 

然后 在 <body> 标 签 中 输入 3 行 段落 文本 ， 并 分 别 应 用 上 面 定义 的 类 样式 。 
<p class="capitalize">text-transform:capitalize:</p> 

<p class="uppercase">text-transform:uppercase:</p> 

<p class="lowercase">text-transform:lowercase:</p> 


分 别 在 下 和 Firefox 浏览 器 中 预览 ， 比 较 效 果 如 图 10.4 和 图 10.5 所 示 。 





ES hordter 0- a0 3 
NT lochostmsiieNest Hn 
Text-Transform:capitalize; 


TEXT-IRANSFORM:UPPERCASE: lt-transtorm:capitalze, 


text-transform:lowercase: TEXT-TRANSFORM-UPPERCASE: 


text-transformlowercase; 





图 10.4 正中 解析 的 大 小 写 效果 图 10.5 Firefox 中 解析 的 大 小 写 效果 


比较 发 现 : 下 认为 只 要 是 单词 就 把 首 字母 转换 为 大 写 ， 而 Firefox 认为 只 有 单词 通过 空格 间隔 之 
后 ， 才 能 够 成 为 独立 意义 上 的 单词 ， 所 以 几 个 单词 连 在 一 起 时 就 算 作 一 个 词 。 
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10.2 设计 文本 样式 


文本 样式 主要 设计 正文 的 排版 效果 ， 属 性 名 以 text 为 前 级 进行 命名 ， 下 面 分 别 进行 介绍 。 
10.2.1 定义 文本 对 齐 


使 用 CSS3 的 text-align 属性 可 以 定义 文本 的 水 平 对 齐 方式 ， 用 法 如 下 : 
text-align : Jeft | right | center | justify 
其 中 ，left 为 默认 值 ， 表 示 左 对 齐 ; right 为 右 对 齐 ; center 为 居中 对 齐 ; justify 为 两 端 对 齐 。 | 
【示例 】 新 建 testhtml 文档 ， 在 内 部 样式 表 中 定义 3 个 对 齐 类 样式 。 | 
left { text-align: left; } | 
.center { text-align: center } | 
Tight { text-align: right: } | 
然后 在 <body> 标 签 中 输入 3 段 文本 ， 并 分 别 应 用 这 3 个 类 样式 。 | 
<p align="left"> 昨 夜 西风 凋 碧 树 ， 独 上 高 楼 ， 望 尽 天 涯 路 </p> | 
| 





<p class="center"> 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 殿 眉 </p> 
<p class='right"> 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 </p> 


在 浏览 器 中 预览 ， 比 较 效果 如 图 10.6 所 示 。 


昨夜 西风 调 碧 树 ， 独 上 高 楼 ， 望 尽 天 沽 路 


太 营 渐 宽 终 不 悔 ， 为 伊 消 得 人 改 性 
众 里 寻 他 干 百度 ， 敖 然 回首 ,邦人 却 在 灯火 阐 渐 处 





10.6 比较 3 种 文本 对 齐 效果 


疱 提示 : CSS3 为 text-align 属性 新 增多 个 属性 值 ， 简 单 说 明 如 下 : 
加 justify: 内 容 两 端 对 齐 。CSS2 曾经 支持 过 ， 后 来 放弃 。 | 
回 start: 内 容 对 齐 开始 边界 | 
回 end: 内 容 对 齐 结束 边界 。 | 
回 match-parent: 与 inherit (继承 ) 表现 一 致 。 
加 justify-all: 效果 等 同 于 justify， 但 还 会 让 最 后 一 行 也 两 端 对 齐 。 
由 于 大 部 分 浏览 器 对 这 些 新 属性 值 支持 不 是 很 友好 ， 读 者 可 以 暂时 忽略 。 
【拓展 】 | 
text-align 属性 仅 对 行内 对 象 有 效 ， 如 文本 、 图 像 、 超 链接 等 ， 如 果 想 让 块 元 
素 对 齐 显示 ， 如 设计 网 页 居中 显示 ， 设 计 <div> 标 签 右 对 齐 ， 需 要 特殊 方法 ， 感 兴 
趣 的 读者 可 以 扫 码 深入 阅读 。 
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| 10.2.2 定义 垂直 对 齐 


使 用 CSS3 的 vertical-align 属性 可 以 定义 文本 垂直 对 齐 ， 用 法 如 下 : 
Vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 


取 值 简单 说 明 如 下 : 

auto 将 根据 layout-flow 属性 的 值 对 齐 对 象 内 容 。 

| 回 baseline 表示 默认 值 ， 表 示 将 支持 valign 特性 的 对 象 内 容 与 基线 对 齐 。 

sub 表示 垂直 对 齐 文本 的 下 标 。 

super 表示 垂直 对 齐 文本 的 上 标 。 

top 表示 将 支持 valign 特性 的 对 象 的 内 容 对 象 顶端 对 齐 。 

text-top 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 顶端 对 齐 。 

middle 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 中 部 对 齐 。 

bottom 表示 将 支持 valign 特性 的 对 象 的 内 容 与 对 象 底 端 对 齐 。 

| text-bottom 表示 将 支持 valign 特性 的 对 象 的 文本 与 对 象 项 端 对 齐 。 

| length 表示 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 或 者 百分数 ， 可 为 负数 ， 定 义 由 基线 算 
| 起 的 偏 移 量 ， 基 线 对 于 数值 来 说 为 0， 对 于 百分数 来 说 就 是 0%。 


加 





回回 回回 回回 回回 


| 【示例 】 新 建 testl.html 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样 
| 式 表 ， 然 后 输入 下 面 样式 ， 定 义 上 标 类 样式 。 

pe enim 

| 然后 在 <body> 标 签 中 输入 一 行 段落 文本 ， 并 应 用 该 上 标 类 样式 。 

”<p>vertical-align 表示 垂直 <span class=" super "> 对 齐 </span> 属 性 <p> 

在 浏览 器 中 预览 ， 显 示 效果 如 图 10.7 所 示 。 

| 


x 


Sa) /oho pac|exsezx 


vertical-align 表 示 季 直 对 齐 属性 





10.7 文本 上 标 样式 效果 


【拓展 】 
lt vertical-align 属性 仅 对 行内 对 象 有 效 ， 如 文本 、 图 像 、 超 链接 等 ， 如 果 想 让 
线 上 阅读 块 元 素 对 齐 显 示 ， 需 要 特殊 方法 ， 感 兴趣 的 读者 可 以 扫 码 深入 阅读 。 


光 ，10.2.3 ”定义 文本 间距 


视频 讲解 | 使 用 CSS3 的 letter-spacing 属性 可 以 定义 字 距 ， 使 用 CSS3 的 word-spacing 属性 可 以 定义 词 距 。 这 
| 两 个 属性 的 取 值 都 是 长 度 值 ， 由 浮 点 数字 和 单位 标识 符 组 成 ， 默 认 值 为 normal， 表 示 默 认 间隔 。 


| 定义 词 距 时 ， 以 空格 为 基准 进行 调节 ， 如 果 多 个 单词 被 连 在 一 起 ， 则 被 word-spacing 视 为 一 个 单 
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词 ， 如 果 汉 字 被 空格 分 隔 ， 则 分 隔 的 多 个 汉字 就 被 视 为 不 同 的 单词 ，word-spacing 属性 此 时 有 效 。 | 
【示例 】 下 面 示 例 演示 如 何 定 义 字 距 和 词 距 样 式 。 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <head> 标 | 
签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样 式 ， 定 义 两 个 类 样式 。 | 
Jspacing {letter-spacing: lem:} 六 字 距 样 式 类 */ | 


.wspacing {word-spacing:lem:} 店 词 距 样式 类 */ | 

然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 

<p class="lspacing">letter spacing word spacing ( 字 间 距 ) </p> | 

<p class="wspacing">letter spacing word spacing 〈 词 间距 ) </p> | 

在 浏览 器 中 预览 ， 显 示 效 果 如 图 10.8 所 示 。 从 图 中 可 以 直观 地 看 到 ， 所 谓 字 距 就 是 定义 字母 之 
间 的 距离 ， 而 词 距 就 是 定义 西 文 单词 的 距离 。 | 








letter spacing word 


letter spacing werd spacing《〈 司 局 见 ) 





图 10.8 字 距 和 词 距 演示 效果 比较 


< 儿 注意 : 字 距 和 词 距 一 般 很 少 使 用 , 使 用 时 应 慎重 考虑 用 户 的 阅读 体验 和 感受 ,对 于 中 文 用 户 来 说 ， 
letter-spacing 属性 有 效 ， 而 word-spacing 属性 无 效 。 


10.2.4 ”定义 行 高 


使 用 CSS3 的 line-height 属性 可 以 定义 行 高 ， 用 法 如 下 : 
| 
其 中 ，normal 表示 默认 值 ， 一 般 为 1.2em; length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 
符 组 成 的 长 度 值 ， 允 许 为 负 值 。 | 
【示例 】 新 建 testhtml 文档 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样 | 
式 表 ， 输 入 下 面 样式 ， 定 义 两 个 行 高 类 样式 。 | 
pl (/* 行 高 样式 类 1%/ 





line-height: lem: /# 行 高 为 一 个 字 大 小 */} 
.P2 {/* 行 高 样式 类 2 */ 
line-height:2em: 让 行 高 为 两 个 字 大 小 *} 


然后 在 <body> 标 签 中 输入 两 行 段落 文本 ， 并 应 用 上 面 两 个 类 样式 。 


<hl> 人 生 三 境界 </h1> 

<h2> 出 自 王 国 维 《 人 间 词 话 》</h2> 

<p class="p1"> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 : "昨夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。 ， 
"此 第 一 境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 翌 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 攻 然 回 首 ， 那 人 却 在 灯火 
阑珊 处 。" 此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 巡 以 此 意 解释 诸 词 ， 丽 为 曼 欧 诸 公所 不 许 也 。</p> | 

<p class="p2"> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 | 
坚忍 ， 不 届 不 挠 ， 造就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 L 
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| 后 回 望 来 路 的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ,看 水 是 水 ; 看 山 不 是 山 , 看 水 不 是 水 ; 看 山 还 是 山 ， 
。 看 水 还 是 水 。<p> 


| 在 浏览 器 中 预览 ， 显 示 效 果 如 图 10.9 所 示 。 


和 
， 训 人 大 
殉 青 会 所 不 许 


凡人 的 





| 
| 

| 

| 

| 

| 

| 笔者 认为， 凡人 部 可 以 从 容 地 基 到 弟 二 
| | 

| 

| 

| 

| 


图 10.9 段落 文本 的 行 高 演示 效果 


【拓展 】 
line-height 属性 的 用 法 比较 复杂 ,灵活 使 用 该 属性 可 以 设计 很 多 特殊 效果 , 感 
兴趣 的 读者 可 以 扫 码 深入 阅读 。 


10.2.5 “定义 首 行 缩 进 








| 

| 使 用 CSS3 的 text-indent 属性 可 以 定义 文本 首 行 缩 进 ， 用 法 如 下 : 

extingent length 

| length 表示 百分比 数字 ， 或 者 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 建 议 在 设置 
| 缩 进 单位 时 ， 以 em 为 设置 单位 ， 它 表示 一 个 字 距 ， 这 样 比较 精确 确定 首 行 缩 进 效果 。 

| 【示例 1】 新建 testhtml 文档 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样 
| 式 表 ， 输 入 下 面 样式 ， 定 义 段落 文本 首 行 缩 进 2 个 字符 。 

pp {textindent2em:} 局 首 行 缩 进 2 个 字 距 

然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 


| 
| <hl> 人 生 三 境界 <hl> 
| <h2> 出 自 王国 维 《 人 间 词 话 》</h2> 

<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :“" 昨 夜 西风 凋 碧 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 
境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 暮 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 
"此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 刀 以 此 意 解释 诸 词 ， 恐 为 曼 欧 诸 公所 不 许 也 。</p> 

<p> 笔 者 认为 ， 凡 人 都 可 以 从 容 地 做 到 第 二 境界 ， 但 要 想 逾 越 它 却 不 是 那么 简单 。 成 功 人 士 果敢 坚忍 ， 不 届 
不 挠 ,造就 了 他 们 不 同 于 凡人 的 成 功 。 他 们 逾越 的 不 仅仅 是 人 生 的 境界 ， 更 是 他 们 自我 的 极限 。 成 功 后 回 望 来 路 
的 人 ， 才 会 明白 另 解 这 三 重 境界 的 话 : 看 山 是 山 ， 看 水 是 水 ; 看 山 不 是 山 ， 看 水 不 是 水 ; 看 山 还 是 山 ， 看 水 还 是 
水 。</p> 

在 浏览 器 中 预览 ， 可 以 看 到 文本 缩 进 效果 ， 如 图 10.10 所 示 。 

【示例 2】 使 用 text-indent 属性 可 以 设计 悬垂 缩 进 效果 。 

新 建 一 个 网 页 ， 保 存 为 testl.html， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 
部 样式 表 。 
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输入 下 面 样式 ， 定 义 段落 文本 首 行 缩 进 负 的 2 个 字符 ， 并 定义 左 侧 内 部 补 白 为 2 个 字符 。 
Pp {/* 悬垂 缩 进 2 个 字 距 */ 





text-indent:-2em:; /# 首 行 缩 进 */ 

padding-left:2em: /* 左 侧 补 白 */} | 
text-indent 属性 可 以 取 负 值 , 定义 左 侧 补 白 , 防止 取 负 值 缩 进 导致 首 行文 本 伸 到 段落 的 边界 外 边 。 全 
然后 在 <body> 标 签 中 输入 如 下 标题 和 段落 文本 。 
<hl>《 人 间 词话 》 节 选 <h1> 
<h2> 王 国 维 </h2> 


<p> 古 今 之 成 大 事业 、 大 学 问 者 ， 必 经 过 三 种 之 境界 :" 昨 夜 西风 凋 正 树 。 独 上 高 楼 ， 望 断 天 涯 路 。" 此 第 一 
境 也 。" 衣 带 渐 宽 终 不 悔 ， 为 伊 消 得 人 惟 迟 。" 此 第 二 境 也 。" 众 里 寻 他 千百度 ， 荞 然 回首 ， 那 人 却 在 灯火 阑珊 处 。 
"此 第 三 境 也 。 此 等 语 皆 非 大 词 人 不 能 道 。 然 巡 以 此 意 解释 诸 词 ， 恐 为 曼 欧 诸 公所 不 许 也 。</p> 


在 浏览 器 中 预览 ， 可 以 看 到 文本 悬垂 缩 进 效 果 ， 如 图 10.11 所 示 。 


出 自 王国 维 《 人 问 词话 》 
a 


嘛 ; 不 人 
和 : 和 


认为 ， 凡人 加 以 从 到 入 二 1 境界 ， 介 要 二 境界 ， 但 要 想 诊 直 它 却 不 是 那么 条 
证 拱 。 生 二 了 他 们 不 博识 了 信人 不 由 外人 的 记 贡 ， [oe 


功 后 国 于 
这 三 重 ; 站 是 水 者 山 不 是 山 ， 者 水 不 
看 山 还 是 山 ， 看 水 还 是 水 。 





图 10.10 首 行 缩 进 效果 图 10.11 悬垂 缩 进 效果 


10.3 设计 图 像样 式 


在 CSS 没有 普及 前 ， 主 要 使 用 <img> 标 签 的 属性 来 控制 图 像样 式 ， 如 大 小 、 边 框 、 位 置 等 。 使 用 
CSS 可 以 更 方便 地 控制 图 像 显示 ， 设 计 各 种 特殊 效果 ， 这 种 用 法 也 符合 W3C 标准 ， 是 现在 推荐 的 | 
用 法 。 | 


10.3.1 定义 图 像 大 小 


<img> 标 签 包含 width 和 height 属性 ， 使 用 它们 可 以 控制 图 像 的 大 小 。 不 过 CSS 提供 了 更 符合 标 
准 的 width 和 height 属性 ， 使 用 这 两 个 属性 可 以 更 灵活 地 设计 图 像 大 小 。 | 
【示例 1】 下 面 是 一 个 简单 的 使 用 CSS 控制 图 像 大 小 的 案例 。 | 
启动 Dreamweaver， 新 建 网 页 ， 保 存 为 testl html， 在 <body> 标 签 内 输入 以 下 代码 。 | 
<img class="w200" src="images/1.jpg" > | 
<img class="w200" src="images/2.jpg" > 
<img class="w200" src="images/3.jpg" /> 
<img src="images/4.jpe" /> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 以 
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| 
， 类 样式 的 方式 控制 网 页 中 图 片 的 显示 大 小 。 
ww200 {/* 定义 控制 图 像 高 度 的 类 样式 */ 
| height:200px: 
/ | 
色 ] | 


| 显示 效果 如 图 10.12 所 示 , 可 以 看 到 使 用 CSS 更 方便 地 控制 图 片 大 小 ,提升 了 网 页 设计 的 灵活 性 。 
当 图 像 大 小 取 值 为 百分比 时 ， 浏 览 器 将 根据 图 像 包含 框 的 宽 和 高 进行 计算 。 
| 【 示 例 2 在 下 面 这 个 示例 中 ， 统 一 定义 图 像 缩小 509%6， 然 后 分 别 放 在 网 页 中 和 一 个 固定 大 小 的 
| 盒子 中 ， 则 显示 效果 截然 不 同 ， 比 较 效果 如 图 10.13 所 示 。 
| <style type="text/css"> 
div {/* 定义 固定 大 小 的 包含 框 */ 


| 
| height:200px: /* 固定 高 度 */ 
| width:50%; 庆 设计 弹性 宽度 */ 
| border:solid 1px red: /# 定义 一 个 边框 */} 
img {/* 定义 图 像 大 小 */ 
width:50%: /# 百分比 宽度 */ 
height:50%; /# 百分比 高 度 */} 
</style> 


<div> <img src="images/4.png" /> </div> 
<img src="images/4.pne" /> 





10.12 固定 缩放 图 像 图 10.13 百分比 缩放 图 像 


， 窑 提 示 : 当 为 图 像 仅 定 义 宽度 或 高 度 ， 则 浏览 器 能 够 自动 调整 纵横 比 ,使 宽 和 高 能 够 协调 缩放 ， 吉 
| 免 图像 变形 。 但 是 一 旦 同时 为 图 像 定义 帘 和 高 ， 就 要 注意 宽 高 比 ， 否 则 会 失真 。 


10.3.2 ”定义 图 像 边框 
视频 讲解 图 像 在 默认 状态 是 不 会 显示 边框 的 ， 但 在 为 图 像 定义 超 链接 时 会 自动 显示 2 一 3 像素 宽 的 蓝 色 粗 
| 边框 。 使 用 border 属性 可 以 清除 这 个 边框 ， 代 码 如 下 所 示 : 
<a hre 人 ="#"><img src="images/login.gif" alt=" 登 录 " border="0" /></a> 
不 推荐 上 述 用 法 ， 建 议 使 用 CSS 的 border 属性 定义 。CSS 的 border 属性 不 仅 可 以 为 图 像 定义 边 
， 框 ， 且 提供 了 丰富 的 边框 样式 ， 支 持 定义 边框 的 粗细 、 颜 色 和 样式 。 
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【示例 1】 针 对 上 面 的 清除 图 像 边 框 效果 ， 使 用 CSS 定义 则 代码 如 下 。 
img { /* 清除 图 像 边框 */ 
pordernone: 
使 用 CSS 为 <img> 标 签 定义 无 边框 显示 ， 这样 就 不 再 需要 为 每 个 图 像 定义 0 边框 的 属性 。 下 面 分 ， 
别 讲解 图 像 边框 的 样式 、 颜 色 和 粗细 的 详细 用 法 。 
1. 边框 样式 


CSS 为 元 素 的 边框 定义 了 众多 样式 ， 边 框 样式 可 以 使 用 border-style 属性 来 定义 。 边框 样式 包括 
两 种 : 虚线 框 和 实 线 框 。 | 
回 ”虚线 框 包括 dotted (点 ) 和 dashed (虚线 ) 。 | 
【示例 2】 在 下 面 示例 中 , 分 别 定义 两 个 不 同 的 点 线 和 虚线 类 样式 , 然后 分 别 应 用 到 两 幅 图 像 上 ， | 
则 效果 如 图 10.14 所 示 ， 通 过 比较 可 以 看 到 点 线 和 虚线 的 细微 差异 。 | 
<style type="text/css"> 
img {width:250px; margin:12px;} /* 固定 图 像 显 示 大 小 */ 
.dotted { /* 点 线 框 样式 类 */ 


Ii 
| 
| 
| 
| 
| 
border-style:dotted:} | 
.dashed { /* 虚线 框 样式 类 */ | 
| 
| 
| 
| 
| 
| 











border-style:dashed: 
} 
</style> 

<img class="dotted" src="images/1.png" alt=" 点 线 边框 " /> 
<img class="dashed" src="images/1.png" alt=" 虚 线 边 框 " /> 


让 = tocahest deo ms -sc se 





10.14 正 浏 览 器 中 的 点 线 和 虚线 比较 效果 


实 线 框 包括 实 线 框 (solid) 、 双 线 框 (double) 、 立 体 上 四 槽 (groove) 、 立 体 凸 槽 (ridge) 、 
立体 止 边 〈inset) 、 立 体 凸 边 《〈outset) 。 其 中 实 线 框 solid 是 应 用 最 广 的 一 种 边框 样式 。 


深 提示 : 双 线 框 由 两 条 单线 和 中 间 的 空 陈 组 成 ， 三 者 宽度 之 和 等 于 边框 的 宽度 .但 是 双 线 框 的 值 分 
配 也 会 存在 一 些 矛 盾 ， 无 法 做 到 平均 分 配 。 如 果 边 框 宽度 为 3px， 则 两 条 单线 与 其 间 空 阶 | 

分 别 为 1px; 如 果 边框 宽度 为 4px， 则 外 侧 单 线 为 2px， 内 侧 和 中 间 空隙 分 别 为 lpx; 如 果 | 

边框 宽度 为 Spx， 则 两 条 单线 宽度 为 2px， 中 间 空 际 为 lpx。 其 他 取 值 依 此 类 推 。 | 

2. 边框 颜色 和 宽度 | 

| 


使 用 CSS 的 border-color 属性 可 以 定义 边框 的 颜色 ; 使 用 border-width 可 以 定义 边框 的 粗细 。 当 | 
元 素 的 边框 样式 为 none 时 ， 所 定义 的 边框 颜色 和 边框 宽度 都 会 同时 无 效 。 在 默认 状态 下， 元 素 的 边 国 
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| 

| 框 样式 为 uone， 而 元 素 的 边框 宽度 默认 为 2~3px。 

【示例 3] 在 下 面 示例 中 快速 定义 图 像 各 边 的 边框 ， 显 示 效果 如 图 10.15 所 示 。 

| 


<style type="text/css"> 


凤 内 ”img li 图 像 的 边框 样式 4/ 
一 | width:100px: 上 宽度 六 
border:solid red 150px: 上 # 统一 定义 各 边 样 式 ， 实 线 框 、 红 色 、120 像素 宽度 */ 
| border-color:red blue green yellow: 谍 顶 边 红色 、 右 边 蓝 色 、 底 边 绿色 、 左 边 黄色 */ 
| } 
</style> 


<img src="images/1.pne" 广 


| 【示例 4】 也 可 以 配合 使 用 不 同 复合 属性 自 定义 各 边 样式 ， 例 如 ， 下 面 示例 分 别 用 border-style、 
| border-color 和 border-width 属性 自 定义 图 像 各 边 边框 样式 ， 效 果 如 图 10.16 所 示 。 


| <style type="text/css"> 
img {/* 图 像 的 边框 样式 */ 


width:300px: 让 宽度 */ 
| border-style:solid dashed dotted double: 让 顶 边 实 线 、 右 边 虚线 、 底 边 点 线 、 左 边 双 线 */ 
| border-width:10px 20px 30px 40px: 店 顶 边 10px、 右 边 20px、 底 边 30px、 左 边 40px */ 
| border-color:red blue green yellow: 必 顶 边 红色 、 右 边 蓝 色 、 底 边 绿色 、 左 边 黄色 */ 
| } 
</style> 


<img src="images/1.png" /> 


10.15 ”定义 各 边 边框 的 样式 效果 





图 10.16 自 定义 各 边 边框 的 样式 效果 


如 果 各 边 样式 相同 ， 使 用 border 会 更 方便 设计 。 例 如 ,在 下 面 示例 中 ， 定 义 各 边 样式 为 红色 实 线 


| 框 ， 宽 度 为 20 像素 ， 则 代码 如 下 所 示 : 


height:200px: 
border:solid 20px red: 





顺序， 可 以 任意 调整 顺序 。 


/# 宽度 所 
/# 高 度 志 
证 边框 样式 */ 


在 上 面 代 码 中 ，border 属性 中 的 3 个 值 分 别 表示 边框 样式 、 边 框 颜色 和 边框 宽度 ， 它 们 没有 先后 
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10.3.3 ”定义 不 透明 度 


在 CSS3 中 ， 使 用 opacity 可 以 设计 图 像 的 不 透明 度 。 该 属性 的 基本 用 法 如 下 : 
‘opacity:0~1:; 
取 值 范围 0~1， 数 值 越 小 ， 透 明度 也 就 越 高 ，0 为 完全 透明 ， 而 1 表示 完全 不 透明 。 
容 提示 : 早期 但 浏 览 器 使 用 CSS 滤 镜 定义 透明 度 ， 基 本 用 法 如 下 : | 
filter:alpha(opacity=0~100): | 
取 值 范围 0-100， 数 值 越 小 ， 透 明度 也 就 越 高 ，0 为 完全 透明 ，100 表示 完全 不 透明 。 
【示例 】 在 下 面 这 个 示例 中 ， 先 定义 一 个 透明 样式 类 ， 然 后 把 它 应 用 到 一 个 图 像 中 ， 并 与 原 图 进 
行 比 较 ， 演 示 效 果 如 图 10.17 所 示 。 
<style type="text/css"> 
img { width:300px:} 
.opacity {/* 透明 度 样式 类 */ 








opacity: 0.3; 证 标准 用 法 */ 
filter:alpha(opacity=30); 上 # 兼容 正 早 期 版 本 浏览 器 */ | 
-moz-opacity:0.3; 庆 兼容 Firefox 浏览 器 */ | 
} | 
</style> | 


<img src="images/1.png" title=" 图 像 不 透明 度 " /> 
<img class="opacity" src="images/1.png" title=" 图 像 透 明度 为 0.3" /> 





图 10.17 图 像 透明 度 演示 效果 


10.3.4 定义 圆 角 特效 


CSS3 新 增 了 border-radius 属性 ， 使 用 它 可 以 设计 圆 角 样式 。 该 属性 用 法 如 下 : 

border-radius:none | <length>{1.4} [/ <length>{1.4} J?: | 

border-radius 属性 初始 值 为 none, 适用 于 所 有 元 素 , 除了 border-collapse 属性 值 为 collapse 的 table | 
元 素 。 取 值 简单 说 明 如 下 : | 

none: 默认 值 ， 表 示 元 素 没有 圆 角 。 | 

加 。 <length>: 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 L 
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为 了 方便 定义 元 素 的 4 个 项 角 圆 角 ，borderradius 属性 派生 了 4 个 子 属性 。 
border-top-right-radius: 定义 右上 角 的 圆 角 。 
border-bottom-right-radius: 定义 右 下 角 的 圆 角 。 

仿 F | border-bottom-left-radius: 定义 左下 角 的 圆 角 。 
vi border-top-left-radius: 定义 左上 角 的 圆 角 。 


总 提示 : border-radius 属性 可 包含 两 个 参数 值 : 第 一 个 值 表 示 国 角 的 水 平 半径 ， 第 二 个 值 表示 国 角 


| 的 垂直 半径 ， 两 个 参数 值 通过 针线 分 隔 。 如 果 仅 包含 一 个 参数 值 ， 则 第 二 个 值 与 第 一 个 值 
| 相同 ， 它 表示 这 个 角 就 是 一 个 四 分 之 一 圆 角 。 如 果 参 数值 包含 0， 则 就 是 矩形 ， 不 会 显示 


可 


为 圆 角 。 


| 

| 

| 【示例 】 下 面 示例 分 别 设计 两 个 圆 角 类 样式 ， 第 一 个 类 rl 为 固定 12 像素 的 圆 角 ， 第 二 个 类 12 
| 为 弹性 取 值 50% 的 椭圆 圆 角 ， 然 后 分 别 应 用 到 不 同 的 图 像 上 ， 则 演示 效果 如 图 10.18 所 示 。 


<style type="text/css"> 

img { width:300px:border:solid 1px #eee:} 

| I1 { border-radius:12px: } 

| J2 { border-radius:50%:} 

| </style> 

<img class="rl" src="images/1.png" title=" 圆 角 图 像 " /> 
<img class="r2" src="images/1.png" title=" 椭 圆 图 像 " /> 








图 1018 贺 角 图 像 演示 效果 
10.3.5 “定义 阴影 特效 


CSS3 新 增 了 box-shadow 属性 ， 该 属性 可 以 定义 阴影 效果 。 该 属性 用 法 如 下 所 示 : 
box-shadow:none | <shadow> [ . <shadow> ]*: 


box-shadow 属性 的 初始 值 是 none， 该 属性 适用 于 所 有 元 素 。 取 值 简单 说 明 如 下 : 

回 ”none: 默认 值 ， 表 示 元 素 没有 阴影 。 

回 。 <shadow>: 该 属性 值 可 以 使 用 公式 表示 为 inset && [ <length>{2,4} && <color>?], 其 中 inset 
表示 设置 阴影 的 类 型 为 内 阴影 ， 默 认为 外 阴影 ，<length> 是 由 浮 点 数 和 单位 标识 符 组 成 的 长 
度 值 ， 可 取 正 负 值 ， 用 来 定义 阴影 水 平 偏 移 、 垂 直 偏 移 ， 以 及 阴影 大 小 〈 即 阴影 模糊 度 ) 、 
阴影 扩展 。<color> 表 示 阴 影 颜 色 。 
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窟 提示: 如 果 不 设置 阴影 类 型 ， 默 认为 投影 效果 ， 当 设置 为 inset 时 ， 则 阴影 效果 为 内 阴影 。X 轴 
偏 移 和 Y 轴 偏 移 定义 阴影 的 偏 移 距离 。 阴 影 大 小 、 阴 影 扩展 和 阴影 颜色 是 可 选 值 ， 默 认 | 
re box-shadow 属性 值 必须 设置 阴影 的 偏 移 值 ， 否 则 没有 效果 。 如 果 需 要 定义 阴 

， 不 需要 偏 移 ， 此 时 可 以 定义 阴影 偏 移 为 0， 这样 才 可 以 看 到 阴影 效果 。 | 
【示例 1】 在 下 面 这 个 示例 中 设计 一 个 阴影 类 样式 ， 定 义 圆 角 、 阴 影 显示 ， 设置 加 角 大 小 为 8 像 | vote 

素 ， 阴 影 显示 在 右 下 角 ， 模 糊 半 径 为 14 像素 ， 然 后 分 别 应 用 到 第 二 幅 图 像 上 ， 演 示 效果 如 图 10.19 | 
所 示 。 | 

















四 10.19 阴影 图 像 演示 效果 


<style type="text/css"> | 
img { width:300px: margin:6px:} | 
tf | 

border-radius:8px: 

-moz-box-shadow:8px 8px 14px #06C: 。“” /* 兼 容 Gecko 引擎 */ 

-webkit-box-shadow:8px 8px 14px #06C: ”/* 兼 容 Webkit 引擎 */ 

box-shadow:8px 8px 14px #06C: 证 标准 用 法 */ | 
} | 
</style> | 
<img src="images/1.png" title=" 无 阴影 图 像 " /> 
<img class="r1" src="images/1.png" title=" 阴 影 图 像 " /> 


【示例 2】box-shadow 属性 用 法 比较 灵活 ， 可 以 设计 车 加 阴影 特效 。 例如， 在 上 面 示例 中 ， 修 改 | 
类 样式 rl 的 代码 如 下 : | 
| 
img { width:300px: margin:6px:} | 
a 
border-radius:12px: 
box-shadow:-10px 0 12px red. | 
10px 0 12px blue. | 
0 -10px 12px yellow. | 
0 10px 12px green: 
} 


通过 多 组 参数 值 定义 渐变 阴影 效果 如 图 10.20 所 示 。 
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| 图 10.20 设计 图 像 多 层 阴 影 效 果 
| 
| 


你 提示 : 当 设计 多 个 阴影 时 ， 需 要 注意 书写 顺序 ， 最 先 写 的 阴影 将 显示 在 最 顶层 。 如 在 上 面 这 段 代 
码 中 ， 先 定义 一 个 10 像素 的 红色 阴影 ， 再 定义 一 个 10 像素 大 小 、10 像素 扩展 的 阴影 。 
显示 结果 就 是 红色 阴影 层 覆 盖 在 黄色 阴影 层 之 上 ， 此 时 如 果 顶 层 的 阴影 太 大 ， 就 会 这 盖 底 
部 的 阴影 。 


10.4 案例 实战 


| 
| css3 优化 和 增强 了 CSS2.1 的 字体 和 文本 属性 ， 使 网 页 文字 更 具有 表现 力 和 感染 力 , 丰富 了 网 页 
| 文本 的 样式 和 版 式 。 


| 10.4.1 设计 文本 阴影 


杭 频 讲 解 ”在 CSS3 中 ， 可 以 使 用 text-shadow 属性 为 文字 添加 阴影 效果 ， 用 法 如 下 所 示 。 

| text-shadow:none | <shadow> [ , <shadow> ]* 

<shadow> = <length>{2.3} && <color>? 

text-shadow 属性 的 初始 值 为 无 ， 适 用 于 所 有 元 素 。 取 值 简单 说 明 如 下 : 

none: 无 阴影 。 

<length>@D 第 1 个 长 度 值 用 来 设置 对 象 的 阴影 水 平 偏 移 值 。 可 以 为 负 值 。 
<length>@: 第 2 个 长 度 值 用 来 设置 对 象 的 阴影 垂直 偏 移 值 。 可 以 为 负 值 。 
<length>@: 如 果 提供 了 第 3 个 长 度 值 ， 则 用 来 设置 对 象 的 阴影 模糊 值 。 不 允许 负 值 。 
| <color>: 设置 对 象 的 阴影 的 颜色 。 

| 【示例 】 下 面 为 段落 文本 定义 一 个 简单 的 阴影 效果 ， 演 示 效果 如 图 10.21 所 示 。 





加 加 加 加 加 
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文本 关 影 ，text-shadow 





图 10.21 定义 文本 阴影 
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ER 0.lem 0.1em #333:} 


四: text-shadow</p> 
“text-shadow: 0.1em 0.1em #333;” 声 明了 右 下 角 文本 阴影 效果 ， 如 果 把 投影 设置 到 右上 角 ， 则 可 | 
以 这 样 声明 ， 效 果 如 图 10.22 所 示 。 
Pp {text-shadow: -0.1em -0.1em #333:} 
同 理 ， 如 果 设 置 阴影 在 文本 的 左下 角 ， 则 可 以 设置 如 下 样式 。 
p {text-shadow: -0.1em 0.1em #333;} 
演示 效果 如 图 10.23 所 示 。 





BS hs//ocahest P - SC | econon LE /otowm P+ Ec | Socahos 





图 10.22 定义 左上 角 阴影 图 10.23 定义 左下 角 阴影 
也 可 以 增加 模糊 效果 的 阴影 ， 效 果 如 图 10.24 所 示 。 
pf text-shadow: 0.1em 0.1em 0.3em #333:; } 
或 者 定义 如 下 模糊 阴影 效果 ， 效 果 如 图 10.25 所 示 。 
text-shadow: 0.1em 0.1em 0.2em black: 


BB hs/ ooh -BOBSocaton | 


六 地 天 影 : 


text-shadow 





图 10.24 定义 模糊 阴影 1 图 10.25 定义 模糊 阴影 2 


text-shadow 属性 的 第 一 个 值 表示 水 平 位 移 ; 第 二 个 值 表示 垂直 位 移 ， 正 值 偏 右 或 偏 下 ， 负 值 偏 左 
或 偏 上 ;第 三 个 值 表示 模糊 半径 ， 该 值 可 选 ， 第 四 个 值 表示 阴影 的 颜色 ， 该 值 可 选 。 
在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 模 糊 半径 是 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 如 何 计 | 
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A 从 入 门 到 精通 ( 微 课 精 编 肢 ) 





算 模 糊 效果 的 具体 算法 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 还 可 以 选择 指定 一 个 颜色 值 。 如 果 
| 没有 指定 颜色 ， 那 么 将 使 用 color 属性 值 来 蔡 代 。 


| 10.4.2 控制 文本 溢出 


text-overflow 属性 可 以 设置 超 长 文本 省 略 显示 。 基 本 语法 如 下 所 示 : 
text-overflow:clip | ellipsis 
适用 于 块 状元 素 ， 取 值 简单 说 明 如 下 : 
回 clip: 当 内 联 内 容 溢出 块 容器 时 ， 将 溢出 部 分 裁 切 掉 ， 为 默认 值 。 
视频 讲解 | 回 ellipsis 当 内 联 内 容 滋 出 块 容器 时 ， 将 溢出 部 分 蔡 换 为 (…) 。 
这 提示 : 在 早期 W3C 文档 (http://www.w3.org/TR/2003/CR-css3-text-20030514/#textoverflow-mode ) 
中 ，text-overflow 被 纳入 规范 ， 但 是 在 最 新 修订 的 文档 ( http://www.w3.org/TR/css3-text/ ) 
中 没有 再 包含 text-overflow 属性 。 
| 由 于 W3C 规范 放弃 了 对 text-overflow 属性 的 支持 ， 所 以 ，Mozilla 类 型 浏览 器 也 放弃 了 对 
| 该 属性 的 支持 。 不 过 ，Mozilla developer center 推荐 使 用 -moz-binding 的 CSS 属性 进行 兼 
| 容 。Firefox 浏览 器 支持 XUL (XUL， 一 种 XML 的 用 户 界面 语言 )， 这 样 就 可 以 使 用 





-moz-binding 属性 来 绑 定 XUL 里 的 ellipsis 属性 了 。 


”4 抽 注意 :text-overflow 属性 仅 是 内 容 注 解 ， 当 文本 溢出 时 是 否 显示 省 略 标记 ， 并 不 具备 样式 定义 的 
| 特性 。 要 实现 溢出 时 产生 省 略 号 的 效果 ， 还 应 定义 两 个 样式 : 强制 文本 在 一 行内 显示 
| (white-space:nowrap ) 和 溢出 内 容 为 隐藏 (overflow:hidden ) ， 只 有 这 样 才 能 实现 溢出 文 
| 本 显示 省 略 号 的 效果 。 

【示例 】 下 面 示例 设计 新 闻 列 表 有 序 显示 ， 对 于 超出 指定 宽度 的 新 闻 项 ， 则 使 用 text-overflow 属 
性 省 略 并 附加 省 略 号 ， 避 免 新 闻 换行 或 者 撞 开 版 块 ， 演 示 效 果 如 图 10.26 所 示 。 


了 GOEEEICCEEEIG 


写 8 天 作 守 江青 月 过 入 。 曾 邓 江 拓 4 吉 刀 乱 工 》 
号 大 漠 友 类 直 长 本 天 日 图。 唐 王 维 《使 本 上 





| 图 10.26 设计 固定 宽度 的 新 闻 栏目 
| 示例 代码 如 下 : 
| <style type="text/css"> 
dl {* 定 义 新 闻 栏目 外 框 ， 设 置 固定 宽度 */ 
width:300px: 
border:solid 1px #ccc: 
} 
dt {/* 设 计 新 闻 栏目 标题 行 样式 */ 
padding:8px 8px: 履 增 加 文本 周围 空隙 */ 
margin-bottom:12px: 广 调 整 底 部 间距 */ 
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background:#7FECAD url(images/green.gif) repeat-x: 记 设 计 标 题 栏 背景 图 */ 
必定 义 字体 样式 #/ 

font-size:13px: font-weight:bold: color:#71790C: 

text-align:left; 局 恢复 文本 默认 左 对 齐 */ 
border-bottom:solid 1px #efefef: 让 定义 浅 色 边框 线 */ 


} 
dd {* 设 计 新 闻 列 表 项 样式 */ 
font-size:0.78em; 
证 固定 每 个 列表 项 的 大 小 */ 
height:1.5em;width:280px: 
/为 添加 新 闻 项 目 符号 腾 出 空间 #/ 
padding:2px 2px 2px 18px: 
让 以 背景 方式 添加 项 目 符号 */ 
background: url(images/icon.gif) no-repeat 6px 2596: 
margin:2px 0; 
/# 为 应 用 text-overflow 做 准备 ， 禁 止 换行 */ 
white-space: nowrap:; 
必 为 应 用 text-overflow 做 准备 ， 禁 止 文 本 洲 出 显示 */ 


overflow: hidden: 
-0-text-overflow: ellipsis: 必 兼容 Opera */ 
text-overflow: ellipsis: 必 兼容 IE 和 Safari (WebKit) */ 
-moz-binding: url(images/ellipsis.xml#ellipsis"): 上 # 兼容 Firefox */} 
</style> 
<d> 
<d 忆 唐诗 名 句 精 选 </dt> 


<dd> 海 内 存 知己 ， 天 涯 若 比邻 。 唐 。 王勃 《 送 杜 少 府 之 任 蜀 州 》 </dd> 
<dd> 不 知 细 叶 谁 裁 出 ， 二 月 春风 似 剪刀。 唐 。 贺 知 章 《 咏 柳 》 </dd> 
<dd> 欲 穷 千里 目 ， 更 上 一 层 楼 。 唐 。 王 之 澳 《 登 驮 从 楼 》 </dd> 
<dd> 野 旷 天 低 树 ， 江 清 月 近 人 。 唐 。 和 孟浩然 《 宿 建 德江 》 </dd> 
<dd> 大 漠 孤 烟 直 ， 长 河 落日 圆 。 唐 。 王 维 《 使 至 塞 上 》 </dd> 

<d> 


10.4.3 ”控制 文本 换行 


在 CSS3 中 ， 使 用 word-break 属性 可 以 定义 文本 自动 换行 。 基 本 语法 如 下 所 示 : 
word-break:normal | keep-all | break-all 

取 值 简单 说 明 如 下 : 

回 ”normal: 为 默认 值 ， 依 照 亚洲 语言 和 非 亚洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 。 
keep-all: 对 于 中 文 、 韩 文 、 日 文 ， 不 允许 字 断 开 。 适 合 包含 少量 亚洲 文本 的 非 亚 洲 文本 。 








break-all: 与 normal 相同 ， 人 允许 非 亚洲 语言 文本 行 的 任意 字 内 断 开 。 该 值 适合 包含 一 些 非 | 
| 


亚洲 文本 的 亚洲 文本 ， 如 使 连续 的 英文 字母 间断 行 。 
word-wrap 属性 没有 被 广泛 地 支持 , 特别 是 Firefox 和 Opera 浏览 器 对 其 支持 
比较 消极 ， 这 是 因为 在 早期 的 W3C 文本 模型 (http://www.w3.org/TR/2003/ 
CR-css3-text-20030514/) 中 放弃 了 对 其 支持 ， 而 是 定义 了 wrap-option 属性 代 蔡 
word-wrap 属性 。 但 是 在 最 新 的 文本 模式 (http://www.w3.org/ TR/css3-text/) 中 继 
续 支持 该 属性 ， 并 重 定义 了 属性 值 。 
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2 
| CSS 曾 定义 了 多 个 与 文本 换行 相关 的 排版 属性 , 如 line-break、word-break、word-wrap、white-space， 
| 由 于 浏览 器 的 兼容 性 未 能 广泛 应 用 ， 感 兴趣 的 读者 可 以 扫 码 了 解 它 们 的 区 别 和 用 法 。 
全 提示 : 在 正 浏览 器 中 , 使 用 “word-wrap:break-word:” 声明 可 以 确保 所 有 文本 正常 显示 。 在 Firefox 
浏览 器 中 ， 中 文 不 会 出 任何 问题 。 英 文 语句 也 不 会 出 问题 。 但 是 ， 长 串 英 文 会 出 问题 。 为 
了 解决 长 串 英文 ， 一 般 使 用 “word-wrap:break-word;” 和 “word-break:break-all;” 上 声明 结 
| 合 使 用 。 但 是 ， 这 种 方法 会 导致 普通 的 英文 语句 中 的 单词 被 断 开 显示 (IE 浏览 器 下 也 是 )。 
现在 的 问题 主要 存在 于 长 串 英文 和 英文 单词 被 断 开 的 问题 。 
为 了 解决 这 个 问题 , 可 使 用 “word-wrap:break-word;overflow:hidden;”, 而 不 是 “word-wrap: 
break-word; word-break:break-all:”.。“word-wrap:break-word;overflow:auto;” 在 正 浏览 器 下 
没有 任何 问题 ， 但 是 在 Firefox 浏览 器 下 ， 长 串 英文 单词 就 会 被 庶 住 部 分 内 容 。 
【示例 】 下 面 示例 在 页 面 中 插入 一 个 表格 ， 由 于 标题 行文 字 较 多 ， 标 题 行 常 被 断 开 ， 影响 了 浏览 
体验 。 为 了 解决 这 个 问题 ， 借 助 CSS 换行 属性 进行 处 理 ， 比 较 效果 如 图 10.27 所 示 。 








<style type="text/css"> 


ble { 

| width: 100%; 

| font-size: 14px: 

| border-collapse: collapse; 必定 义 细 线 表格 和 
border: 1px solid #cad9ea: 店 添 加 淡色 细 线 边框 */ 


table-layout: fixed;/* 定 义 表格 在 浏览 器 端 逐步 解析 呈现 ， 避 免 破坏 布局 */ 





background-image: url(images/th bg].gif): 让 使 用 背景 图 模拟 渐变 背景 */ 
background-repeat: repeat-x; * 定 义 背 景 图 平 铺 方式 */ 
height: 30px: 
| vertical-align:middle: 让 垂直 居中 显示 */ 
| border: 1px solid #cad9ea; 上 # 添 加 淡色 细 线 边框 所 
| padding: 0 lem 0: 
| overflow: hidden: 让 超出 范围 隐藏 显示 ， 避 免 撑 开 单元 格 */ 
| word-break: keep-all: /# 禁 止 词 断 开 显示 所 
| white-space: nowrap: /# 强 迫 在 一 行内 显示 所 
| } 
| 
| at 
| height: 20px: 
| border: 1px solid #cad9ea: 目 添 加 淡色 细 线 边框 */ 
padding: 6px lem: 证 增加 单元 格 空 阶 ， 避 免 文 本 挤 在 一 起 */ 
} 


tr:nth-child(even) { background-color: #f5fafe: } 
.Ww4 { width: 4em: } 
</style> 
<table> 
<t> 
<th class="w4"> 与 文本 换行 相关 的 属性 </th> 
<th> 使 用 说 明 </th> 


$8 


“206* 


第 10 章 使 用 CSS3 美化 网 页 文本 和 图 傣 





<td>line-break</td> 
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处 理 前 处 理 后 
10.27 禁止 表格 标题 文本 换行 显示 


10.4.4 ”设计 动态 内 容 


content 属性 属于 内 容 生成 和 葵 换 模块 , 可 以 为 匹配 的 元 素 动态 生成 内 容 。 这样 就 能 够 满足 在 CSS | 
样式 设计 中 临时 添加 非 结 构 性 的 样式 服务 标签 ， 或 者 添加 补充 说 明 性 内 容 等 。 
content 属性 的 简明 语法 如 下 所 示 : 


content: normal | string | attrO | urlO | counterO | none: 


取 值 简单 说 明 如 下 : 

normal: 默认 值 。 表 现 与 none 值 相同 。 

string: 插入 文本 内 容 。 

attr0: 插入 元 素 的 属性 值 。 

url0: 插入 一 个 外 部 资源 ， 如 图 像 、 音 频 、 视 频 或 浏览 器 支持 的 其 他 任何 资源 。 
counter(): 计数 器 ， 用 于 插入 排序 标识 。 

none: 无 任何 内 容 。 


回回 回回 加 加 
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”内 提示 : content 属性 早 在 CSS2.1 中 就 被 引入 ， 可 以 使 用 :before 和 after 伪 元 素 生成 内 容 ， 此 特性 

| 目前 已 被 大 部 分 的 浏览 器 支持 ， 另 外 Opera 9.5+ 和 Safari 4 已 经 支持 所 有 元 素 的 content 

| 属性 ， 而 不 仅仅 是 :before 和 :after 伪 元 素 。 

全 | 在 CSS3 Generated Content 工作 草 集中 ，content 属性 添加 了 更 多 的 特征 。 例如， 插入 以 及 
| 移 除 文档 内 容 的 能 力 ， 可 以 创建 脚注 、 结 语 和 段落 注释 ， 但 是 目前 还 没有 浏览 器 支持 


content 的 扩展 功能 。 


【示例 】 下 面 示例 使 用 content 属性 ， 配合 CSS 计数 器 设计 多 层 嵌 套 有 序列 表 序 号 设计 ， 效 果 如 
| 图 10.28 所 示 。 


<style type="text/css"> 


| 
| /* 清 除 默认 的 序号 志 
| li:before {color#f00: font-family:Times New Roman:} 谍 设 计 层级 目录 序号 的 字体 样式 */ 
| li{counter-increment:a 1:} 人 # 设 计 递增 函数 a， 递 增 起 始 值 为 1 */ 
| li:before {content:counter(a)". ":} /# 把 递增 值 添加 到 列表 项 前 面 #/ 
| lili{counter-increment:b 1:} 人 # 设 计 递增 函数 b， 递 增 起 始 值 为 1 */ 
| li li:before {content:counter(a)"."counter(b)". ":} 让 把 递增 值 添 加 到 二 级 列表 项 前 面 */ 
| lilili{counter-increment:c 1:} 庆 设 计 递增 函数 c， 递 增 起 始 值 为 1 */ 
| Tilili:before{fcontent:counter(a)"."counter(b)"."counter(c)". ":} /# 把 递增 值 添加 到 三 级 列表 项 前 面 拟 
| </style> 
<o> 
<li> 一 级 列表 项 目 1 
| <ol> 
| <1i> 二 级 列表 项 目 1<li> 
| <li> 二 级 列表 项 目 2 
<ol> 


<1i> 三 级 列表 项 目 1</li> 
<I> 三 级 列表 项 目 2</li> 
</o> 
< 
</ol> 


<I> 
<li> 一 级 列表 项 目 2</li> 
</ol> 


1. 一 级 列表 项 目 : 
1.1. 二 级 列表 项 中 1 
1.2. 二 级 列表 项 目 





图 10.28 使 用 CSS 技巧 设计 多 级 层级 目录 序号 
| 10.4.5 ”设计 个 性 字体 


视频 讲解 | Css3 人 允许 用 户 通过 @font-face 规 则 加 载 网 络 字体 文件 ,实现 自动 定义 字体 类 型 的 功能 .@font-face 
| 规则 在 CSS3 规范 中 属于 字体 模块 。 
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@font-face 规则 的 语法 格式 如 下 : 
@font-face { <font-description> } 


@font-face 规则 的 选择 符 是 固定 的 ， 用 来 引用 网 络 字体 文件 。<font-description> 是 一 个 属性 名 值 


对 ， 格 式 类 似 如 下 样式 : 


属性 及 其 取 值 说 明 如 下 : 

font-family: 设置 文本 的 字体 名 称 。 
font-style: 设置 文本 样式 。 
font-variant: 设置 文本 是 否 大 小 写 。 
font-weight: 设置 文本 的 粗细 。 


font-size: 设置 文本 字体 大 小 。 


办 办 办 办 多 凶 


用 。 
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font-stretch: 设置 文本 是 否 横向 地 拉 伸 变形 。 


src: 设置 自 定义 字体 的 相对 路 径 或 者 绝对 路 径 。 注 意 ， 该 属性 只 能 在 @font-face 规则 里 使 














闪 提示 : 事实 上 ，IE 5 已 经 开始 支持 该 属性 ， 但 是 只 支持 微软 自 有 的 .eot (Embedded Open Type) 
字体 格式 ， 而 其 他 浏览 器 直到 现在 都 不 支持 这 一 字体 格式 。 不 过 ， 从 Safari 3.1 开始 , 用 | 
户 可 以 设置 .ttf ( TrueType ) 和 .off ( OpenType ) 两 种 字体 作为 自 定义 字体 了 。 考 虑 到 浏览 | 


器 的 兼容 性 ， 在 使 用 时 建议 同时 定义 .eot 和 .ttf， 以 便 能 够 兼容 所 有 主流 浏览 器 。 
【示例 】 下 面 是 一 个 简单 的 示例 ， 演 示 如 何 使 用 @font-face 规则 在 页 面 中 使 用 网 络 字体 。 


码 如 下 : 


<style type="text/css"> 
启 引入 外 部 字体 文件 */ 
@font-face { 
必 选择 默认 的 字体 类 型 */ 
font-family: "lexograph": 
庆 兼容 正 */ 


src: url(http://randsco.com//fonts/lexograph.eot): 


上 # 兼容 非 正 所 


src: local("Lexographer"). url(http://randsco.com/fonts/lexograph.ttf) format("truetype"): 


} 
ht 


上 # 设置 引入 字体 文件 中 的 lexograph 字体 类 型 */ 


font-family: lexograph. verdana., sans-serif: 
font-size:4em:} 
</style> 


<h1>http://www.baidu.com/</h1> 
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之 A 





图 10.29 ”设置 为 lexograph 字体 类 型 的 文字 


安 提示 : 岩 入 外 部 字体 需要 考虑 用 户 带 宽 问 题 ， 因 为 一 个 中 文字 体 文件 少 的 有 几 个 MB， 大 的 有 十 
几 个 MB, 这 么 大 的 字体 文件 下 载 过 程 会 出 现 延 迟 ， 同 时 服务 器 也 不 能 忍受 如 此 频繁 的 申 
请 下 载 。 如 果 只 是 想 标题 使 用 特殊 字体 ， 最 好 设计 成 图 片 。 


10.4.6 ”设计 正文 版 式 1 


| 
| 
| 。。 中文 版 式 与 西 文 版 式 存在 很 多 不 同 。 例 如 ， 中 文 段落 文本 缩 进 ， 而 西 文 悬 垂 列 表 ， 中 文 段落 一 般 
| 没有 段 距 , 而 西 文 习惯 设置 一 行 的 段 距 等 .中 文 报刊 文章 习惯 以 块 的 适度 变化 来 营造 灵活 的 设计 版 式 。 
| 中 文 版 式 中 , 标题 习惯 居中 显示 , 正文 之 前 喜欢 设计 一 个 题 引 , 题 引 为 左右 缩 进 的 段落 文本 显示 效果 
| 正文 以 首 字 下 沉 效果 显示 。 

| 本 案例 将 展示 一 个 简单 的 中 文 版 式 ， 把 一 级 标题 、 二 级 标题 、 三 级 标题 和 段落 文本 的 样式 分 别 设 
| 

| 

| 

| 

| 








| 计 ， 从 而 使 信息 的 轻重 分 明 ， 更 有 利于 用 户 阅 读 ， 演 示 效 果 如 图 10.30 所 示 。 


CSS Zen Garden 


并 提供 直 吾 的 视 抽 种 吉 力 。 只 更 记 二 列表 中 任 会 一 个 伞 世 天 就 可 以 将 它 加 轩 列 相交 


绕 瑟 。 遇 让 TIC、NSP 等 标准 组 织 ， 以 及 浏览 专 三 


的 网 页 。 让 我 们 月 茹 形 林 审视 ， 序 涤 浊 起 和 特 情 





| 
| 10.30 ”报刊 式 中 文 格式 效果 
| 
| 


【操作 步骤 】 
| 第 1 步 ， 设 计 网 页 结构 。 本 示例 的 HTML 文档 结构 依然 采用 禅 意 花园 的 结构 ， 截 取 第 一 部 分 的 
| 结构 和 内 容 ， 并 把 英文 全 部 意译 为 中 文 。 


<divi 
<hl><span>CSS Zen Garden</span></h1> 


“210° 


第 10 章 使 用 CSS3 半 化 网 页 文本 和 图 傣 | | 
<h2><span><acronym title="cascading style sheets">CSS</acronym> 设 计 之 美 </span></h2> | 
</div> 
<div id="quickSummary"> 
<p class="pl"><span> 展 示 以 <acronym 


title="cascading style sheets">CSS</acronym> 技 术 为 基础 , 并 提供 超 强 的 视觉 冲击 力 。 只 要 选择 列表 中 任意 一 | 


个 样式 表 ， 就 可 以 将 它 加 载 到 本 页 面 中 ， 并 呈现 不 同 的 设计 效果 。</span></p> 
<p class="p2"><span> 下 载 <a title=" 这 个 页 面 的 HTML 源 代码 不 能 够 被 改动 。" 
href="http://www.csszengarden.com/zengarden-sample.html">HTML 文档 </a> 和 <a 
title=" 这 个 页 面 的 CSS 样式 表 文 件 ， 你 可 以 更 改 它 。" 
href="http://www.csszengarden.com/zengarden-sample.css">CSS 文件 </a>。</span></p> 
</div> 
<div id="preamble"> 
<h3><span> 启 蒙 之 路 </span></h3> 
<p class="pl"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 
title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 
title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 , 如 今 当 使 用 这 些 不 兼容 的 标签 和 样式 时 , 设计 
之 路 会 很 坎坷 。</span></p> 
<p class="p2"><span> 现 在 ， 我 们 必须 清除 以 前 为 了 兼容 不 同 浏览 器 而 使 用 的 一 些 过 时 的 小 技巧 。 
感谢 <acronym 
title="world wide web consortium">W3C</acronym>、<acr 
title="web standards project">WASP</acronynm> 等 标准 组 织 ， 以 及 浏览 器 厂家 和 开发 师 们 的 不 懈 努 力 , 我 们 终 
于 能 够 进入 Web 设计 的 标准 时 代 。</span></p> 
<p class="p3"><span>CSS Zen 
Garden〔 样 式 表 禅 意 花园 ) 邀请 你 发 挥 自己 的 想象 力 ， 构 思 一 个 专业 级 的 网 页 。 让 我 们 用 慧眼 
来 审视 ， 充 满 理想 和 激情 去 学 习 CSS 这 个 不 朽 的 技术 ， 最 终 使 自己 能 够 达到 技术 和 艺术 合 而 为 一 的 最 高 境界 。 
</span></p> 
</div> 
</div> 


| 
| 
| 
贷 一 


第 2 步 ， 定 义 网 页 基本 属性 。 定 义 背 景色 为 白色 ， 字 体 为 黑色 。 也 许 你 认为 浏览 器 默认 网 页 就 是 | 


这 个 样式 ， 但 是 考虑 到 部 分 浏览 器 会 以 灰色 背景 显示 ， 显 式 声明 这 些 基本 属性 会 更 加 安全 。 字 体 大 小 
为 14px， 字 体 为 宋体 。 
body {/* 页 面 基本 属性 */ 


background:#ffF /# 背景 色 */ 

color:#000: /# 前 景色 */ 
font-size:0.875em: 雍 网 页 字体 大 小 */ 
font-family:" 新 宋体 ". Arial. Helvetica. sans-serif 上 网 页 字体 默认 类 型 */} 


第 3 步 ， 定 义 标题 居中 显示 ， 适 当 调整 标题 底 边 距 ， 统 一 为 一 个 字 距 。 间 距 设计 的 一 般 规 律 : 字 
距 小 于 行距 , 行距 小 于 段 距 , 段 距 小 于 块 距 。 检 查 的 方法 可 以 尝试 将 网 站 的 背景 图 案 和 线条 全 部 去 掉 ， 
看 是 否 还 能 保持 想 要 的 区 块 感 。 

hl. h2. h3 {/* 标题 样式 */ 

text-align:center: 诺 居中 对 齐 */ 
margin-bottom: lem: 雍 定义 底 边界 */} 





第 4 步 ， 为 二 级 标题 定义 一 个 下 划 线 ， 并 调 暗 字体 颜色 ， 目 的 是 使 一 级 标题 、 二 级 标题 和 三 级 标 | 


题 在 同一 个 中 轴线 显示 时 产生 一 个 变化 ， 避 免 单调 。 由 于 三 级 标题 字数 少 〈4 个 汉字 )， 可 以 通过 适 
当 调节 字 距 来 设计 一 种 平衡 感 ， 避 免 因 为 字数 太 少 而 使 标题 看 起 来 很 单调 。 
了 h2 {/* 个 性 化 二 级 标题 样式 */ 


21 人。 
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> 
| color-#999: 让 字体 颜色 */ 
| text-decoration:underline: 刻下 划 线 */} 
| h3 {l#* 个 性 化 三 级 标题 样式 */ 
| Jetter-spacing:0.4em /* 字 距 坟 
仿 7 | font-size:1.4em:; 片 字体 大 小 */} 


第 5 步 ， 定 义 段 落 文 本 的 样式 。 统 一 清除 段落 间距 为 0， 定 义 行 高 为 1.8 倍 字体 大 小 。 
e 
Pp tl 统一 段落 文本 样式 */ 
| margin:0; /#* 清除 段 距 */ 
| line-height:1.8em: 证 定义 行 高 */} 
| 第 6 步 ,定义 第 一 文本 块 中 的 第 一 段 文本 字体 为 深 灰 色 , 定义 第 一 文本 块 中 的 第 二 段 文 本 右 对 齐 ， 
| 定义 第 一 文本 块 中 的 第 一 段 和 第 二 段 文本 首 行 缩 进 两 个 字 距 ， 同 时 定义 第 二 文本 块 的 第 一 段 、 第 二 段 
和 第 三 段 文 本 首 行 缩 进 两 个 字 距 。 
#quickSummary .pl {/* 第 一 文本 块 的 第 一 段 样式 */ 


| Color:#444; /#* 字体 颜色 */} 
| #quickSummary p2 {/* 第 一 文本 块 的 第 二 段 样式 */ 

| text-align:right: 旋 右 对 齐 */} 

| #quickSummary p1, .p2, .p3 {/* 除了 首 字 下 沉 段 以 外 的 段 样 式 */ 

| text-indent:2em; 人 # 首 行 缩 进 *#/} 


第 7 步 ， 为 第 一 个 文本 块 定义 左右 缩 进 样式 ， 设 计 引 题 的 效果 。 

| #quickSummary {/* 第 一 文本 块 样式 */ 

| margin-left:4em; 此 左 缩 进 */ 

| margin-right:4em:; /# 右 缩 进 */} 

| 第 8 步 ， 定 义 首 字 下 沉 效果 。CSS 提供 了 一 个 首 字 下 沉 的 属性 一 一 first-letter， 这 是 一 个 伪 对 象 。 
| 什么 是 伪 、 伪 类 和 伪 对 象 ， 我 们 将 在 超 链接 设计 章节 中 进行 详细 讲解 。 但 是 first-letter 属性 所 设计 的 
| 首 字 下 沉 效 果 存 在 很 多 问题 ， 所 以 还 需要 进一步 设计 。 例 如 ， 设 置 段落 首 字 浮 动 显示 〈 什 么 是 浮动 请 
| 参阅 CSS 布局 章节 讲解 )， 同 时 定义 字体 大 小 很 大 ， 以 实现 下 沉 效 果 。 为 了 使 首 字 下 沉 效 果 更 明显 ， 

这 里 设计 首 字 加 粗 、 反 白 显示 
.first:first-letter {/* 首 字 下 沉 样式 类 */ 


| font-size:S0px: /# 字体 大 小 */ 

| float:left: /# 向 左 浮动 显示 */ 

| margin-right:6px: 话 增加 右 侧 边 距 */ 

| padding:2px: 诈 增加 首 字 四 周 的 补 白 */ 

| font-weight:bold: 庆 加 粗 字体 */ 
line-height:lem: /# 定义 行距 为 一 个 字体 大 小 ， 避 免 行 高 影响 段落 版 式 */ 

| background:#000: 尹 背景 色 

color#EE 信 前 景色 */} 


4 注意 : 由 于 正 早 期 版 本 浏览 器 存在 bug， 无 法 通过 :first-letter 选择 器 来 定义 首 字 下 沉 效果 ， 故 这 
里 重新 定义 了 一 个 首 字 下 沉 的 样式 类 (first) ， 然 后 手动 把 这 个 样式 类 加 入 到 HTML 文档 

| 结构 对 应 的 段落 中 。 

| <p class="pl first"><span> 不 同 浏览 器 随意 定义 标签 ， 导 致 无 法 相互 兼容 的 <acronym 

| title="document object model">DOM</acronym> 结 构 ， 或 者 提供 缺乏 标准 支持 的 <acronym 

| title="cascading style sheets">CSS</acronym> 等 陋习 随处 可 见 ， 如今 当 使 用 这 些 不 兼容 的 标签 和 样式 
时 ， 设 计 之 路 会 很 坎坷 。</span></p> 
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a 


安 提示: 在 阅读 信息 时 ， 段 落 文本 的 呈现 效果 多 以 块 状 存在 。 如 果 说 单个 字 是 点 ， 一 行文 本 为 线 ， | 
那么 段落 文本 就 成 面 了 ， 而 面 以 方形 呈现 的 效率 最 高 ， 网 站 的 视觉 设计 大 部 分 其 实 都 是 在 
拼 方块 。 在 页 面 版 式 设计 中 ， 建 议 坚持 如 下 设计 原则 。 


回 方块 感 赵强 ， 越 能 给 用 户 方向 感 ' 邹 
回 方块 越 少 ， 越 容易 阅读 。 
回 方志 之 间 以 室 自 的 形式 进行 分 隔 ， 从 而 组 合 为 一 个 更 大 的 方块。 
其 他 样式 以 及 整个 案例 效果 请 参阅 本 节 实例 源 代码 Ne 
10.4.7 ”设计 正文 版 式 2 
回 


本 节 示 例 将 展示 一 个 简单 的 层级 式 中 文 版 式 ， 把 一 级 标题 、 二 级 标题 、 三 级 标题 和 段落 文本 以 阶 | 视频 讲解 
梯 状 缩 进 ， 从 而 使 信息 的 轻重 分 明 ， 更 有 利于 用 户 阅 读 ， 演 示 效 果 如 图 10.31 所 示 。 


€ 3 ET TT PC 





图 10.31 层级 缩 进 式 中 文 版 式 效果 


【操作 步骤 】 

第 1 步 ， 复 制 上 节 示 例 源 代码 ， 删 除 所 有 的 CSS 内 部 样式 表 源 代码 。 

第 2 步 ， 首 先 定义 页 面 的 基本 属性 。 这 里 定义 页 面 背景 色 为 灰 绿 浅 色 ， 前 景色 为 深 黑 色 ,， 字 体 大 
小 为 0.875em ( 约 为 14px)。 





body {/* 页 面 基本 属性 * | 
‘background:#99CC99:; /* 背景 色 */ | 
color:#333333; 信 前 景色 〈 字 体 颜色 ) */ 
margin: lem: 诺 页 边 距 *#/ 
font-size:0.875em: 上 # 页 面 字体 大 小 */} 


| 
| 
第 3 步 ， 统 一 标题 为 下 划 线 样式 ， 且 不 再 加 粗 显示 ， 限 定 上 下 边 距 为 1 个 字 距 。 在 默认 情况 下 ， 
不 同 级 别 的 标题 上 下 边界 是 不 同 的 。 适 当 调整 字 距 之 间 的 疏 密 。 | 


hl. h2. h3 {/* 统一 标题 样式 */ 
font-weight:normal: 


上 # 正常 字体 粗细 */ | 
text-decoration:underline: 下 划 线 所 | 
letter-spacing:0.2em: 所 增加 字 距 */ 四 
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| margin-top:lem:; 谍 固定 上 边界 */ 

| margin-bottom: lem; 人 # 固定 下 边界 + 人 

| 第 4 步 ， 分 别 定义 不 同 标题 级 别 的 缩 进 大 小 ， 设 计 阶梯 状 缩 进 效 果 。 

全 | ， ”11 (7 一 级 标题 样式 
| font-family:Arial, Helvetica, sans-serif: /#* 标题 无 衬 线 字体 */ 
margin-top:0.5em:; /# 缩小 上 边 边界 */} 

| h2 {padding-left:lem:} 上 左 侧 缩 进 1 个 字 距 */ 
| h3 {padding-left:3em:;} 上 # 左 侧 缩 进 3 个 字 距 */ 


第 5 步 ， 定 义 段 落 文本 左 缩 进 ， 同 时 定义 首 行 缩 进 效果 。 清 除 段落 默认 的 上 下 边界 距离 。 
Pp {/* 段落 文本 样式 */ 





line-height:1.6em: 谍 行 高 *#/ 
text-indent:2em; /# 首 行 缩 进 */ 
margin:0; * 清除 边界 */ 
padding:0: 让 清除 补 白 */ 
| padding-left:sem 语 左 缩 进 */} 
10.4.8 设计 正文 版 式 3 
和 本 案例 以 宁静 、 含 蓄 为 主 设计 风格 ， 结 合 英文 版 式 设计 习惯 ， 整 体 设计 以 深 黑色 为 底 色 ， 浅 灰色 


| 为 前 景色 ， 营 造 一 种 安静 的 、 富 有 内 涵 的 网 页 主观 效果 。 
| 字体 以 无 衬 线 字体 为 主 ， 这 样 给 人 感觉 页 面 比较 干净 ， 避 免 字体 的 衬 线 使 页 面 看 起 来 拖泥带水 。 
| 文本 行 以 朴 朗 的 风格 进行 设计 。 整 个 网 页 设计 效果 如 图 10.32 所 示 。 

| 详细 操作 步骤 请 扫 码 阅读 。 




















图 10.32 设计 的 英文 格式 效果 
“10.4.9 设计 正文 版 式 4 


本 例 在 10.4.8 节 示 例 基础 上 ， 借 用 HTML 文档 结构 ， 然 后 利用 CSS 调整 页 面 风格 ， 通 过 增 大 前 
景色 与 背景 色 的 对 比 度 ， 调 整 标题 行 的 对 齐 方式 ， 适 当 收 缩 行距 ， 使 页 面 看 起 来 有 些 炫目 ， 行 文 也 趋 
于 紧凑 ， 这 样 页 面 风格 就 更 具 酒 脱 、 干 练 ， 页 面 设计 效果 如 图 10.33 所 示 。 
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详细 操作 步骤 请 扫 码 阅读 。 
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图 10.33 设计 英文 格式 效果 
105 在 线 练 习 


本 节 提 供 了 两 个 在 线 练习 : (1) 文本 样式 ; (2) 文本 流 方向 。 读 者 可 使 用 CSS 设计 各 种 文本 效 
果 ， 以 及 各 种 网 页 版 式 和 文本 特效 。 | 





回 # 
在 线 练 习 1 
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使 用 CSS3 背景 图 像 和 渐变 背景 


在 前 面 章 节 中 ， 我 们 介绍 了 如 何在 网 页 中 插入 图 像 ， 但 是 在 网 页 设计 中 ， 用 户 更 喜欢 使 用 
CSS3 的 background 属性 来 显示 网 页 图 像 ， 这 样 可 以 避免 破坏 HIML 文档 结构 ， 美 化 网 页 更 灵 
活 。 如 果 利 用 CSS3 渐变 技术 还 可 以 设计 各 种 背景 图 案 ， 这 样 能 够 降低 网 页 设计 的 难度 。 


【学 习 要 点 】 


ed 


怠 吾 吾 


正确 使 用 CSS 设计 背景 图 像 

灵活 使 用 多 重 背景 图 像 设计 网 页 版 面 
正确 使 用 线性 渐变 和 径 向 渐变 
熟练 使 用 渐变 函数 设计 背景 图 案 


Wy 
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11.1 设计 背景 图 像 


下 面 我 们 来 学 习 如 何 使 用 CSS 设计 背景 图 像 的 显示 样式 。 
权威 参考 : http://www.w3.org/TR/css3-background/ 


11.1.1 设置 背景 图 像 ey 
在 CSS 中 可 以 使 用 background-image 属性 来 定义 背景 图 像 。 具 体 用 法 如 下 : 


background-image:none | <url> 
默认 值 为 none， 表 示 无 背景 图 ，<url> 表 示 使 用 绝对 或 相对 地 址 指定 背景 图 像 。 


痊 提示 : GIF 格式 图 像 可 以 设计 动画 、 透 明 背 景 特效 ， 而 JPG 格式 图 像 具 有 更 丰富 的 颜色 数 ， 图 像 
品质 相对 要 好 ，PNG 类 型 综合 了 GIF 和 JPG 两 种 图 像 的 优点 。 


【示例 】 如 果 背 景 包 含 透明 区 域 的 GIF 或 PNG 格式 图 像 ， 则 被 设置 为 背景 图 像 时 ， 这 些 透 明 区 

域 依然 被 保留 。 在 下 面 这 个 示例 中 ， 先 为 网 页 定义 背景 图 像 ， 然后 再 为 段落 文本 定义 透明 的 GIF 背景 
图 像 ， 则 显示 效果 如 图 11.1 所 示 。 

<style type="text/css"> 

html, body. p{ height:100%;} 

body {background-image:url(images/bg.ipg):} 

Pp { background-image:url(images/ren.png):} 

</style> 

SP/p> 

















图 11.1 透明 背景 图 像 的 显示 效果 
11.1.2 ”设置 显示 方式 


CSS 使 用 background-repeat 属性 控制 背景 图 像 的 显示 方式 。 具 体 用 法 如 下 所 示 : 


backeround-repeat:repeat-x | Tepeat-y | [repeat | space | round | no-repeat]{1.2} 
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repeat-x: 背景 图 像 在 横向 上 平 铺 。 
Tepeat-y: 背景 图 像 在 纵向 上 平 铺 。 
repeat: 背景 图 像 在 横向 和 纵向 上 平 铺 。 
no-repeat: 背景 图 像 不 平 铺 。 
round: 背景 图 像 自动 缩放 ， 直 到 适应 且 填 充满 整个 容器 ， 仅 CSS3 支持 。 
space: 背景 图 像 以 相同 的 间距 平 铺 且 填充 满 整个 容器 或 某 个 方向 ， 仅 CSS3 支持 。 
| 【示例 】 下 面 示例 设计 一 个 公司 公告 栏 ， 其 中 宽度 是 固定 的 ， 但 是 其 高 度 可 能 会 根据 正文 内 容 进 
行动 态 调整 ， 为 了 适应 这 种 设计 需要 ， 不 妨 利用 垂直 平 铺 来 进行 设计 。 
第 1 步 ， 把 “公司 公告 ”栏目 分 隔 为 上 、 中 、 小 三 块 ， 设 计 上 块 和 下 块 为 固定 宽度 ， 而 中 间 块 为 
可 以 随时 调整 高 度 。 设 计 的 结构 如 下 : 
<div id="call"> 
<div id="call_tit"> 公 司 公告 </div> 
<div id="call mid"></div > 
| <div id="call btm"></div > 
| </div> 
”第 2 步 ， 所 实现 的 样式 表 如 下 : 
<style type="text/css"> 


3 
)S 
办 罗 办 因 办 


#call { 
| width:218px: 族 固定 宽度 */ 
| font-size: 14px; 启 字体 大 小 */ 
| } 
#call_tit { 
| background:url(images/call_top.gif): /* 头 部 背景 图 像 */ 
| background-repeat:no-repeat: 上 # 不 平 铺 显示 */ 
| height:43px: 必 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 
| color:#fff: 证 白色 标题 *#/ 
font-weight:bold: 启 粗 体 */ 
text-align:center: 上 # 居中 显示 */ 
line-height:43px: 上 # 标题 垂直 居中 */ 
| } 
call mid { 
| background-image:url(images/call_mid.gif): /* 背景 图 像 */ 
background-repeat:repeat-y: /# 垂直 平 铺 */ 
height:160px: 上 # 可 自由 设置 的 高 度 */ 
} 
call bim { 
| background-image-url(images/call_ btm_gig: /* 底部 背景 图 像 */ 
| background-repeat:no-repeat: 上 # 不 平 铺 显示 */ 
height:11px: 上 # 固定 高 度 ， 与 背景 图 像 高 度 一 致 */ 


最 后 经 过 调整 中 间 块 元 素 的 高 度 以 形成 不 同 高 度 的 公告 牌 ， 演 示 效 果 如 图 11.2 所 示 。 
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设置 不 同 高 度 的 栏目 效果 比较 


图 11.2 背景 图 像 垂直 平 铺 示例 模拟 效果 
11.1.3 ”设置 显示 位 置 


在 默认 情况 下 ,背景 图 像 显 示 在 元 素 的 左上 角 ， 并 根据 不 同方 式 执行 不 同 显示 效果 。 为 了 更 好 地 后 加 全 
控制 背景 图 像 的 显示 位 置 ，CSS 定义 了 background-position 属性 来 精确 定位 背景 图 像 。 

background-position 属性 取 值 包括 两 个 值 ， 它 们 分 别 用 来 定位 背景 图 像 的 x 轴 、y 轴 坐 标 ， 到 值 | | 
单位 没有 限制 。 具 体 用 法 如 下 所 示 : | 

background-position:[ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | | 
| | 
<length> J? ] && [center | [ top | bottom ] [ <percentage> | <length> ]? | 
| 
| 
| 
| 
| 





默认 值 为 0% 0%， 等 效 于 left top。 | 
【示例 】 下 面 示 例 利 用 4 个 背景 图 像 拼接 起 来 的 一 个 栏目 版 块 。 这 些 背 景 图 像 分 别 被 定位 到 栏目 
的 4 个 边 上 ， 形 成 一 个 圆 角 的 矩形 ， 并 富有 立体 感 ， 效 果 如 图 11.3 所 示 。 | 


上 

So What is This About? | 

对 于 网 页 设计 师 来 说 应 该 好 好 研究 CSS。Zen | 

入 | Garden 到 力 于 推广 和 使 用 Css 技术， 努力 激发 和 

| 发 怠 您 的 灵感 和 参与 讼 者 可 以 从 浏览 嘉 手 的 设 

计 作品 入 门 * 只 要 选择 列表 中 的 任 一 个 样式 境 ， 坏 可 以 将 它 加 载 到 这 个 了 
中 * HTML 文 导 结 怕 册 终 不 变 ， 但 是 读者 可 以 自由 地 修改 和 定义 CSS 样 i 
CSS 有 具有 强大 的 功能 ， 可 以 自由 控制 HTML 结 构 。 当然 认 者 需 : 


一 | 
Css 技术 的 能 力 和 闻 和 的 灵感 ， 同 时 末 自 动手 ， 用 具体 的 实例 归 示 | 
展示 个 人 的 才华 。 夫 至 目前 为 止 ， 很 匀 Weh 设 计 师 和 程序 员 已 经 介 人 rr | 


CSS 应 用 技巧 和 兼容 技术 的 各 种 技巧 和 案例 而 平面 设 计 师 还 没有 足 名 重视 CSS 
的 潜力 。 谍 者 是 不 是 需要 从 现在 着 的 吸 ? 








11.3 背景 图 像 定 位 综合 应 用 
实例 所 用 到 的 HIML 结构 代码 如 下 : 


<div id="explanation"> 
<h3><span> 这 是 什么 ? </span></h3> | 
<p class="p1"><span><span class-"first"> 对 <lspan> 于 网 页 设计 师 来 说 应 该 好 好 研究 <acronym | | 
title="cascading style sheets">CSS</acronym>。Zen Garden 致力 于 推广 和 使 用 CSS 技术 ， 努 力 激发 和 鼓励 您 的 灵 | 
感 和 参与 。 读者 可 以 从 浏览 高 手 的 设计 作品 入 门 。 只 要 选择 列表 中 的 任何 一 个 样式 表 , 就 可 以 将 它 加 载 到 这 个 页 人 
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SS 
| 面 中 。<acronym title="hypertext markup language">HIML</acronym> 文 档 结 构 始 终 不 变 ， 但 是 读者 可 以 自由 地 修 
改 和 定义 <acronym title="cascading style sheets">CSS</acronym> 样 式 表 。</span></p> 
| <p class="p2"><span><acronym title="cascading style sheets">CSS</acronym> 具 有 强大 的 功能 ， 可 以 自由 
控制 HIML 结构 。 当 然 ， 读 者 需要 拥有 驾驭 CSS 技术 的 能 力 和 创意 的 灵感 ， 同 时 亲自 动手 ， 用 具体 的 实例 展示 
全 | CSS 的 魅力 ， 展 示 个 人 的 才华 。 截 至 目前 ， 很 多 Web 设计 师 和 程序 员 已 经 介绍 过 许多 关于 CSS 应 用 技巧 和 兼容 
“| 技术 的 各 种 技巧 和 案例 , 而 平面 设计 师 还 没有 足够 重视 CSS 的 潜力 .读者 是 不 是 需要 从 现在 开始 呢 ? </span></p> 


Ti 
| 根据 这 个 HTML 结构 所 设计 的 CSS 样式 表 如 下 请 注意 背景 图 像 的 定位 方法 ): 
| <STYLE type=text/css > 
body { /* 定义 网 页 背景 色 、 居 中 显示 、 字 体 颜色 */ 
| background:#DFDFDF: text-align:center; color:#454545; 
| } 
| 


p. h3 { margin:0; padding:0: } 庆 清除 段落 和 标题 的 默认 边 距 */ 
#explanation { 
background-color:#fffffF, 让 白色 背景 ， 填 充 所 有 区 域 */ 
background-image:url(images/img_explanation.jpg); /* 指定 背景 图 像 */ 
| background-position:left bottom 居 定位 背景 图 像 位 于 左下 角 */ 
| background-repeat:repeat-y: 上 # 在 垂直 方向 上 平 铺 背景 图 像 */ 
| width:546px: 人 # 固定 栏目 宽度 */ 
| margin:0 auto; 证 栏目 居中 显示 */ 
| font-size:13px; line-height:1.6em: text-indent:2em; ”/* 定义 栏目 内 字体 属性 */ 
| } 
| #explanation h3 { 
| background:url(images/title_explanation.gif) no-repeat: 。/* 顶部 背景 图 像 ， 不 平 铺 */ 
| height:39px: /* 固定 标题 栏 高 度 */ 
| } 
#explanation h3 span { display:none: } 让 隐藏 标题 栏 内 信息 */ 
| #explanation p { /# 定义 右 侧 背 景 图 像 ， 垂 直 平 铺 */ 
| background:url(images/right bg.gif) right repeat-y:} 
| #explanation .p2 span { 履 底部 背景 图 像 ， 不 平 铺 */ 
padding-bottom:20px: 上 # 增加 第 2 段 底 部 内 边 距 ， 显 示 背 景 图 像 */ 


background:url(images/right_bottom.gif) bottom no-repeat: 
} 
#explanation p span {/* 定义 段落 文本 左 侧 的 内 边 距 ， 以 便 显 示 左 侧 背景 图 像 */ 


| 

| padding:0 15px 10px 77px: 

| display:block: 上 # 定义 块 状 显 示 ， 内 边 距 才 有 效 */ 

text-align:left: /# 文本 左 对 齐 */ 

} 

| #explanation p .first { 旋 定义 首 字 下 沉 特效 */ 

| font-size:60px: color#820015S: line-height:lem: 户 字体 显示 属性 */ 

| float:left: 谍 向 左 浮动 所 

| padding:0: 上 # 清除 上 面 样式 为 段落 定义 的 内 边 距 */ 
} 
</STYLE> 


在 上 面 的 样式 表 中 , 通过 分 别 为 不 同 元 素 定义 背景 图 像 , 然后 通过 定位 技术 把 背景 图 像 定位 到 对 
| 应 的 4 个 边 上 ， 并 根据 需要 运用 平 铺 技术 实现 圆 角 区 域 效果 。 
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A 人 多 注意 : 百分比 是 最 灵活 的 定位 方式 ， 同 时 也 是 最 难 把 握 的 定位 单位 。 | 
在 默认 状态 下 ， 定 位 的 位 置 为 (0% 0%) ， 定 位 点 是 背景 图 像 的 左上 顶点 ， 定 位 距离 是 | 
该 点 到 包含 框 左上 角 顶 点 的 距离 ， 即 两 点 重合 。 
如 果 定 位 背景 图 像 为 (100% 100%) ， 定 位 点 是 背景 图 像 的 右 下 顶点 ， 定 位 距离 是 该 点 | 
到 包含 框 左上 角 顶 点 的 距离 ， 这 个 距离 等 于 包含 框 的 宽度 和 高 度 。 
百分比 也 可 以 取 负 值 ， 负 值 的 定位 点 是 包含 框 的 左上 顶点 ， 而 定位 距离 则 以 图 像 自身 的 | 
宽 和 高 来 决定 。 
CSS 还 提供 了 5 个 关键 字 : left、right、center、top 和 bottom。 这 些 关键 字 实 际 上 就 是 百分比 特 | 
殊 值 的 一 种 固定 用 法 。 详 细 列表 说 明 如 下 : 





族 普通 用 法 */ | 
top left、 left top =0%0% | 
right top、 top right = 100% 0% | 
bottom left、left bottom =0% 100% | 
bottom right、 right bottom = 100% 100% | 
店 居中 用 法 */ 

center、 center center =50% 50% | 
/# 特殊 用 法 */ | 
top、 top center、 center top =50% 0% | 
left、 left center、 center left =0% 50% | 
right、 right center、 center right =100% 50% | 
bottom、 bottom center、center bottom =50% 100% | 


11.1.4 设置 固定 背景 


在 默认 情况 下 ， 背 景 图 像 能 够 跟随 网 页 内 容 上 下 滚动 ,可 以 使 用 background-attachment 属性 定义 
背景 图 像 在 窗口 内 固定 显示 ， 具 体 用 法 如 下 : 
background-attachment:fixed | local | scroll 
默认 值 为 scroll， 具 体 取 值 说 明 如 下 : 
回 fixed: 背景 图 像 相 对 于 浏览 器 窗 体 固定 。 
scroll: 背景 图 像 相 对 于 元 素 固定 ， 也 就 是 说 ， 当 元 素 内 容 滚 动 时 背景 图 像 不 会 跟着 滚动 ， 
因为 背景 图 像 总 是 要 跟着 元 素 本 身 。 | 
local: 背景 图 像 相 对 于 元 素 内 容 固定 , 也 就 是 说 , 当 元 素 内 容 滚动 时 背景 图 像 也 会 跟着 滚动 ， | 
此 时 不 管 元 素 本 身 是 否 滚动 ， 当 元 素 显示 滚动 条 时 才 会 看 到 效果 。 该 属性 值 仅 CSS3 支持 。 
【示例 】 在 下 面 的 示例 中 ， 为 <body> 标 签 设置 背景 图 片 ， 且 不 平 铺 、 固 定 ， 这 时 通过 拖 动 浏览 
器 滚动 条 可 以 看 到 网 页 内 容 在 滚动 ， 而 背景 图 片 静止 显示 。 页 面 演示 效果 如 图 11.4 所 示 。 
<style type="text/css"> 














body { 
background-image: url(images/bg.jpg): ”/* 设置 背景 图 片 */ | 
background-repeat: no-repeat: /# 背景 图 片 不 平 铺 */ | 
background-position: left center: 六 背 的 位 置 *#/ | 
background-attachment fixed: 证 背景 图 片 固定 ， 不 随 滚 动 条 滚动 而 滚动 */ | 
height: 1200px: 证 高 度 ， 出 现 浏览 器 的 滚动 条 */ | 


“a 


</style> 

py <divid="box’> 
人 站 | <hl> 雨 埠 <hl> 
Se <h2> 戴 望 舒 </h2> 


<pre> 
夫人， 和 和 


入 委 在 悠长 、 悠 长 
”又 寂寥 的 雨 闪 ， 
我 希望 逢 着 

| 一 个 丁香 一 样 的 
| 结 着 悉 怨 的 姑娘 。 
| 

| 





background-origin 属性 


| 属性 可 以 改变 这 种 定位 方式 。 


Usessatywsaowe ww 有 汉 业 过 ( 拔 名 本 二 到 ) 


| 
#box {float:right: width:400px:} 
| 





11.4 背景 图 片 固定 


11.1.5 设置 定位 原点 


定义 background-position 属性 的 定位 原点 。 在 默认 情况 下 ， 


该 属性 的 基本 语法 如 下 所 示 : 


| 
| 
| 
| background-position 属性 总 是 根据 元 素 左 上 角 为 坐标 原点 进行 定位 背景 图 像 。 使 用 background-origin 
| 
| 


background-origin:border-box |padding-box | content-box: 


| 

| 

| 取 值 简单 说 明 如 下 : 

| border-box: 从 边框 
| 





区 域 开始 显示 背景 。 


padding-box: 从 补 白 区 域 开始 显示 背景 ， 为 默认 值 。 
| content-box: 仅 在 内 容 区 域 显示 背景 。 
| 【示例 】background-origin 属性 改善 了 背景 图 像 定 位 的 方式 ， 更 灵活 地 决定 背景 图 像 应 该 显示 的 
| 位 置 。 下 面 示例 利用 background-origin 属性 重 设 背景 图 像 的 定位 坐标 ， 以 便 更 好 地 控制 背景 图 像 的 显 
| 示 ， 演 示 效 果 如 图 11.5 所 示 。 
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11.5 设计 诗词 效果 


示例 代码 如 下 所 示 : 


<style type="text/css"> 
div {人 * 定 义 包含 框 的 样式 */ 


} 


height: 322px; 
width: 780px: 
border: solid 1px red:; 
ing: 250px 4em 0: 
/#* 为 了 避免 背景 图 像 重 复 平 铺 到 边框 区 域 ， 应 禁止 它 平 铺 六 
background:url(images/p3.jpg) no-repeat: 
族 设 计 背 景 图 像 的 定位 坐标 点 为 元 素 边框 的 左上 角 */ 


background-origin:border-box: 

/#* 将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图像 有 可 能 超出 包含 框 # 
background-size:cover: 

overflow:hidden:; 证 隐藏 超出 包含 框 的 内 容 */ 


divhl, div h2{/* 定 义 标题 样式 */ 


font-size:18px: font-family:" 幼 圆 ": 
text-align:center: 证 水 平 居中 显示 */ 


} 
divp {/* 定 义 正文 样式 */ 


text-indent:2em; /#* 首 行 缩 进 2 个 字符 */ 
line-height:2em: 片 增 大 行 高 ， 让 正文 看 起 来 更 疏 朗 */ 
margin-bottom:2em:; 履 调 整 底 部 边界 ， 增 大 段落 文本 距离 */ 


<hl1> 念 奴 娇 &#8226: 赤 壁 怀古 <hl> 
<h2> 苏 轼 <h2> 


<p> 大 江东 去 ， 浪 淘 尽 ， 千 古风 流 人 物 。 故 侄 西边 ， 人 道 是 ， 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 , 卷 | 


起 千 堆 雪 。 江 山 如 画 ， 一 时 多 少 豪杰 。</p> 
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| <p> 遥 想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 雄 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 ， 档 榴 灰 飞 烟 灭 。 故 国 神游 ， 多 情 应 笑 
| 我， 早生 华发 。 人 生 如 上 梦 ， 一 尊 还 酷 江 月 。</p> 
| </div> 


全 四 11.16 设置 裁剪 区 域 


background-clip 属性 定义 背景 图 像 的 裁剪 区 域 。 该 属性 的 基本 语法 如 下 所 示 : 
background-clip:border-box | padding-box | content-box | text: 

取 值 简单 说 明 如 下 : 

| border-box: 从 边框 区 域 向 外 裁剪 背景 ， 为 默认 值 。 

| padding-box: 从 补 白 区 域 向 外 裁剪 背 景 。 

| 回 content-box: 从 内 容 区 域 向 外 裁剪 背景 。 











| text: 从 前 景 内 容 ( 如 文字 ) 区 域 向 外 裁剪 背景 。 

， 安 提示: 如 果 取 值 为 padding-box， 则 background-image 将 忽 咯 补 白 边缘 ， 此 时 边框 区 域 显示 为 
| 透明 。 

| 

| 如 果 取 值 为 border-box， 则 background-image 将 包括 边框 区 域 。 

| 如 果 取 值 为 content-box， 则 background-image 将 只 包含 内 容 区 域 。 

| 如 果 background-image 属性 定义 了 多 重 背 景 , 则 background-clip 属性 值 可 以 设置 多 个 值 ， 
| 并 用 运 号 分 隔 。 

| 如 果 background-clip 属性 值 为 padding-box，background-origin 属性 取 值 为 border-box， 且 
| background-position 属性 值 为 "top left"( 默认 初始 值 ), 则 背景 图 左上 角 将 会 被 截取 掉 部 分 。 
| 【示例 】 下 面 示例 演示 如 何 设计 背景 图 像 仅 在 内 容 区 域内 显示 ， 演 示 效 果 如 图 11.6 所 示 。 

| p 

| 

| 

| 





图 11.6 ”以 内容 边缘 裁 切 背景 图 像 效 果 
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/将 背景 图 像 等 比 缩放 到 完全 覆盖 包含 框 ， 背 景 图 像 有 可 能 超出 包含 框 所 
background-size:cover: 

/将 背景 图 像 从 content 区 域 开始 向 外 裁剪 背景 */ 
background-clip:content-box: 


如 果 继 续 上 机 练习 background-clip 属性 ， 读 者 可 以 扫 码 获取 学 习 资料 。 


11.1.7 ”设置 背景 图 像 大 小 


background-size 可 以 控制 背景 图 像 的 显示 大 小 。 该 属性 的 基本 语法 如 下 所 示 : 


background-size: [ <length> | <percentage> | auto ]{1,2} | cover | contain: 


取 值 简单 说 明 如 下 : 


<length>: 由 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 


<percentage>: 


cover: 保持 背景 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩放 到 正好 完全 覆盖 所 定义 背景 的 区 域 。 

contain: 保持 图 像 本 身 的 宽 高 比例 ， 将 图 片 缩 放 到 宽度 或 高 度 正 好 适应 所 定义 背景 区 域 。 

初始 值 为 auto。background-size 属性 可 以 设置 1 个 或 2 个 值 ，1 个 为 必 填 ，1 个 为 可 选 。 其 中 第 1 | 
个 值 用 于 指定 背景 图 像 的 width， 第 2 个 值 用 于 指定 背景 图 像 的 height， 如 果 只 设置 1 个 值 ， 则 第 2 | 


个 值 默认 为 auto。 


【示例 】 下 面 示例 使 用 image-size 属性 自由 定制 背景 图 像 的 大 小 ， 让 背景 图 像 自 适应 盒子 的 大 
小 ， 从 而 可 以 设计 与 模块 大 小 完全 适应 的 背景 图 像 。 本 示例 效果 如 图 11.7 所 示 ， 只 要 背景 图 像 长 宽 


取 值 为 0 一 100% 的 值 。 不 可 为 负 值 。 


比 与 元 素 长 宽 比 相同 ， 就 不 用 担心 背景 图 像 变 形 显示 。 


示例 代码 如 下 所 示 : 


<style type="text/css"> 
div{ 
float:left: 














11.7 设计 背景 图 像 自 适应 显示 


ss 











ee 从 入 门 到 精通 ( 微 课 精 编 版 ) 





| border:solid 1px red: 
| background:url(images/img2.jpg) no-repeat center: 
| 证 设计 背景 图 像 完全 覆盖 元 素 区 域 */ 
Fk backeround-size:cover:} 
国内 | /设计 元 素 大 小 
| hl { height80px: width:110px: } 


h2 { height400px: width:550px: } 
Da 





| div lass="hl"></div> 
| <div class="h2"></div> 
> | 11.1.8 ”设置 多 重 背 景 图 像 
视频 讲解 | CSS3 支持 在 同一 个 元 素 内 定义 多 个 背景 图 像 ， 还 可 以 将 多 个 背景 图 像 进 行车 加 显示 ， 从 而 使 得 


| 设计 多 图 背景 栏目 变 得 更 加 容易 。 
| 【示例 】 本 例 使 用 CSS3 多 背景 设计 花边 框 ， 使 用 background-origin 定义 仅 在 内 容 区 域 显示 背景 ， 
| 使 用 background-clip 属性 定义 背景 从 边框 区 域 向 外 裁剪 ， 如 图 11.8 所 示 。 











11.8 设计 花边 框 效果 


示例 代码 如 下 所 示 : 


<style type="text/css"> 
.demo { 
此 设计 元 素 大 小 、 补 白 、 边 框 样式 ， 边 框 为 20 像素 ， 颜 色 与 背景 图 像 色 相同 */ 
width: 400px: padding: 30px 30px: border: 20px solid rgba(104. 104, 142.0.5): 
族 定 义 圆 角 显示 */ 
border-radius: 10px: 
必定 义 字体 显 示 样式 所 
color: #f36: font-size: 80px: font-family:" 素 书 ":line-height: 1.5: text-align: center: 
} 
multipleBg { 
上 定义 5 个 背景 图 ， 分 别 定位 到 4 个 项 角 ， 其 中 前 4 个 禁止 平 铺 ， 最 后 一 个 可 以 平 铺 */ 
background: url(“images/bg-tl png") no-repeat left top. 
ul("images/bg-tr.png") no-repeat right top. 
url("images/bg-blLpng") no-repeat left bottom. 
url("images/bg-br.png") no-repeat right bottom., 
| ul("images/bg-repeat.png”) repeat left top: 
| /# 改 变 背 景 图 像 的 position 原点 ， 四 采花 都 是 border 原点 ， 而 平 铺 背 景 是 padding 原点 */ 
| background-origin: border-box. border-box. border-box. border-box. padding-box: 
上 .控制 背景 图 像 的 显示 区 域 ， 所 有 背景 图 像 超 过 border 外 边缘 都 将 被 剪 切 掉 沁 


“226° 


第 1] 幸 使 用 CSS3 音 术 图像 和 渐变 痊 凡 SS 


backeround-clip: border-box: 
} 
</style> 
<div class="demo multipleBg"> 恭 喜 发 财 </div> 


如 果 继 续 上 机 练习 多 背景 图 像 的 设计 案例 ， 读 者 可 以 扫 码 获取 学 习 资料 。 


11.2 设计 渐变 背景 





W3C 于 2010 年 11 月 份 正式 支持 渐变 背景 样式 ， 该 草案 作为 图 像 值 和 图 像 蔡 换 内 容 模块 的 一 部 | 
分 进行 发 布 。 主 要 包括 linear-gradient() 、 radial-gradient() 、 repeating-linear-gradient() 和 
Tepeating-radial-gradient() 四 个 渐变 函数 。 

权威 参考 : http://dev.w3.org/csswg/css3-images/#gradients/ 


11.2.1 定义 线性 渐变 
创建 一 个 线性 渐变 至 少 需要 两 个 颜色 值 ， 也 可 以 选择 设置 一 个 起 点 或 一 个 方向 。 简 明 语法 格式 | 
如 下 : | 


| 
| 
| 
linear-gradient( angle, color-stopl, color-stop2, ...) | 
参数 简单 说 明 如 下 : | 
| 
| 
| 
| 





回 angle: 用 来 指定 渐变 的 方向 ， 可 以 使 用 角度 或 者 关键 字 来 设置 。 关 键 字 包括 4 个 ， 说 明 
如 下 。 
党 to left: 设置 渐变 为 从 右 到 左 ， 相 当 于 270deg。 

学 to right: 设置 渐变 从 左 到 右 ， 相 当 于 90deg。 

to top: 设置 渐变 从 下 到 上 ， 相 当 于 0deg。 

to bottom: 设置 渐变 从 上 到 下 ， 相 当 于 180deg。 该 值 为 默认 值 。 


容 提示 : 如 果 创 建 对 角 线 渐变 ， 可 以 使 用 to top left ( 从 右 下 到 左上 ) 类 似 组 合 来 实现 。 


color-stop: 用 于 指定 渐变 的 色 点 。 包括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜 色 值 和 起 点 位 置 以 空 | 

格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 〈 不 可 为 负 值 ) ; 也 可 以 是 一 个 百分比 值 ， 如 果 | 

是 百分比 值 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 | 

【示例 1】 下 面 示例 为 <div id="demo"> 对 象 应 用 了 一 个 简单 的 线性 渐变 背景 , 方向 从 上 到 下 , 颜 | 

色 由 白色 到 浅 灰 显 示 ， 效 果 如 图 11.9 所 示 。 


全 
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图 11.9 应 用 简单 的 线性 渐变 效果 
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贷 一 | 于 


| 
3 
syle> 


| <div id="demo"></div> 
次 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 。 
设置 一 个 方向 : 从 上 到 下 ， 履 盖 默 认 值 。 
linear-gradient(to bottom. #ffF #333); 
设置 反 向 渐变 : 从 下 到 上 ， 同 时 调整 起 止 颜色 位 置 。 
linear-gradient(to top. #333, #f8): 
使 用 角度 值 设置 方向 。 
linear-gradient(180deg, #ff. #333); 
明确 起 止 颜色 的 具体 位 置 ， 覆盖 默认 值 。 
linear-gradient(to bottom, #ffff 0%, #333 100%):; 
【拓展 】 
最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 , 但 是 考虑 到 安全 性 , 用 户 应 酌情 兼容 旧版 本 浏览 器 
| 的 私有 属性 。 
| Webkit 是 第 一 个 支持 渐变 的 浏览 器 引擎 〈Safari 4+)， 它 使 用 -webkit-gradient0 私 有 函数 支持 线性 
| 渐变 样式 ， 简 明 用 法 如 下 : 
| -webkit-gradient(linear, point, point, stop) 
| 参数 简单 说 明 如 下 : 
| 回 linear: 定义 渐变 类 型 为 线性 渐变 。 
| 回 point: 定义 渐变 起 始点 和 结束 点 坐标 。 该 参数 支持 数值 .百分比 和 关键 字 , 如 (0 0) 或 者 (left top) 
等 。 关 键 字 包 括 top、bottom、left 和 right。 

回 ”stop: 定义 渐变 色 和 步 长 。 包 括 3 个 值 ， 即 开始 的 颜色 ， 使 用 ffom(colorvalue) 函 数 定义 ; 结 
| 束 的 颜色 ， 使 用 to(colorvalue) 函 数 定义 ; 颜色 步 长 ， 使 用 color-stop(value, color value) 定 义 。 
| color-stop0 函 数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范围 在 0 一 
| 1.0 (或 者 0 一 100%) ， 第 二 个 参数 值 表示 任意 颜色 值 。 

【示例 2】 下 面 示例 针对 示例 1， 兼 容 早期 Webkit 引擎 的 线性 渐变 实现 方法 。 

#demo { 
| width:300px: height:200px: 
| background: -webkit-gradient(linear left top. left bottom. from(#f8). to(#333)): 
| background: linear-gradient(#GEF #333): 


~ 


| 上 面 示例 定义 线性 渐变 背景 色 ， 从 顶部 到 底部 ， 从 白色 向 浅 灰色 渐变 显示 ， 在 谷歌 的 Chrome 浏 
| 览 器 中 所 见效 果 与 图 11.9 相同 。 

| 另外 ，Webkit 引擎 也 支持 -webkit-linear-gradient0 私 有 函数 来 设计 线性 渐变 。 该 函数 用 法 与 标准 函 
| 数 linear-gradient0) 语 法 格式 基本 相同 。 
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Firefox 浏览 器 从 3.6 版 本 开始 支持 渐变 ，Gecko 引擎 定义 了 -moz-linear- adieat0 私 有 函数 来 设计 | 
线性 渐变 。 该 函数 用 法 与 标准 函数 linear-gradient0 语 法 格式 基本 相同 。 唯 一 区 别 就 是 ， 当 使 用 关键 字 
设置 渐变 方向 时 ， 不 带 to 关键 字 前 级 ， 关 键 字 语义 取 反 。 例如， 从 上 到 下 应 用 渐变 ， ed 
to bottom，Firefox 浏览 器 私有 属性 可 以 为 top。 
【示例 3】 下 面 示例 针对 示例 1， 兼 容 早期 Gecko 引擎 的 线性 渐变 实现 方法 。 
#demo { | 
width:300px: height:200px: | 
background: -webkit-gradient(linear. left top. left bottom. from(#ffp, to(#333)): | 
background: -moz-linear-gradient(top, #ffF #333): 
background: linear-gradient(#ffF, #333): 
} 


11.2.2 ”设计 线性 渐变 样式 


本 节 以 案例 形式 介绍 线性 渐变 中 渐变 方向 和 色 点 的 设置 , 演 
示 设 计 线性 渐变 的 一 般 方 法 。 
示例 详细 代码 与 解说 请 扫 码 阅读 。 


11.2.3 ”定义 重复 线性 渐变 


使 用 repeating-linear-gradient() 函 数 可 以 定义 重复 线性 渐变 ， 
用 法 与 linear-gradient0 函 数 相 同 ， 用 户 可 以 参考 11.2.1 节 说 明 。 
演示 示例 与 说 明 请 扫 码 阅读 。 


11.2.4 ”定义 径 向 渐变 


创建 一 个 径 向 渐变 至 少 需 要 定义 两 个 颜色 值 , 同时 可 以 指定 
渐变 的 中 心 点 位 置 、 形 状 类 型 〈 圆 形 或 椭圆 形 ) 和 半径 大 小 。 简 
明 语法 格式 如 下 : 
Tadial-gradient(shape size at position. color-stop1. color-stop2. ...); 
参数 简单 说 明 如 下 : 
shape: 用 来 指定 渐变 的 类 型 ， 包 括 circle( 贺 形 ) 和 ellipse〈 椭 圆 》 两 种 。 | 
size: 如 果 类 型 为 circle， 指 定 一 个 值 设置 圆 的 半径 ， 如 果 类 型 为 ellipse， 指 定 两 个 值 分 别 设 
置 椭 圆 的 x 轴 和 y 轴 半 径 。 取 值 包括 长 度 值 、 百 分 比 、 关 键 字 。 关 键 字 说 明 如 下 。 
党 closest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 边 。 
党 closest-corner: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 近 的 角 。 | 
党 ”farthest-side: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 边 。 | 
党 ”farthest-comer: 指定 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 最 远 的 角 。 | 
position: 用 来 指定 中 心 点 的 位 置 。 如 果 提 供 两 个 参数 ， 第 一 个 表示 x 轴 坐 标 ,第 二 个 表示 y 
轴 坐 标 ; 如 果 只 提供 一 个 值 ， 第 二 个 值 默 认为 50%， 即 center。 取 值 可 以 是 长 度 值 、 百 分 比 
或 者 关键 字 ， 关 键 字 包括 left ( 左 侧 ) 、center (中 心 ) 、right ( 右 侧 ) 、top〔 顶 部 ) 、center 
(中 心 ) 、bottom (底部 ) 。 
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| 

| 加 eolorstop: 用 于 指定 渐变 的 色 点 。 包 括 一 个 颜色 值 和 一 个 起 点 位 置 ， 颜色 值 和 起 点 位 置 以 空 
格 分 隔 。 起 点 位 置 可 以 为 一 个 具体 的 长 度 值 (不 可 为 负 值 》; 也 可 以 是 一 个 百分比 值 ， 如 果 


入- | 是 百分比 值 ， 则 参考 应 用 渐变 对 象 的 尺寸 ， 最 终 会 被 转换 为 具体 的 长 度 值 。 
| 【示例 1) 在 默认 情况 下 ,渐变 的 中 心 是 center (对 象 中心 点 ), 渐变 的 形状 是 ellipse (椭圆 形 )， 
渐变 的 大 小 是 farthest-corner (表示 到 最 远 的 角落 )。 下 面 示例 仅 为 radial-gradient0 函 数 设置 3 个 颜色 


值 ， 则 它 将 按 默认 值 绘制 径 向 渐变 效果 ， 如 图 11.10 所 示 。 
| <style type="text/css"> 


| #demo { 
| height:200px: 
| background: -webkit-radial-gradient(red. green, blue): * Safari 5.1-6.0*/ 
| background: -0-radial-gradient(red, green, blue): /* Opera 11.6- 12.0*/ 
background: -moz-radial-gradient(red. green. blue): /* Firefox 3.6- 15*/ 
background: radial-gradient(red., green. blue): 庆 标准 语法 */ 
} 
</style> 


| 

| <div id="demo"></div> 

”内 提示 : 针对 示例 1， 用 户 可 以 继续 尝试 做 下 面 练 习 ， 实 现 不 同 的 设置 ， 得 到 相同 的 设计 效果 
| 回 设置 径 向 渐变 形状 类 型 ， 默 认 值 为 ellipse 

| background: radial-gradient(ellipse. red, green, blue): 

| 回 设置 径 向 渐变 中 心 点 坐标 ， 默 认为 对 象 中 心 点 。 

| background: radial-gradient(ellipse at center 50%, red, green, blue): 

回 设置 径 向 渐变 大 小 ， 这 里 定义 填充 整个 对 象 。 

background: radial-gradient(farthest-corner red, green, blue); 


【拓展 】 
| 最 新 主流 浏览 器 都 支持 线性 渐变 的 标准 用 法 ， 但 是 考虑 到 安全 性 ,用户 应 酌情 兼容 旧版 本 浏览 器 
| 的 私有 属性 。 


Webkit 引擎 使 用 -webkit-gradientO 私 有 函数 支持 径 向 渐变 样式 ， 简 明 用 法 如 下 : 
-webkit-gradient(radial. point, radius. stop) 

参数 简单 说 明 如 下 : 

Tadial: 定义 渐变 类 型 为 径 向 渐变 。 

point: 定义 渐变 中 心 点 坐标 。 该 参数 支持 数值 、 百 分 比 和 关键 字 ， 如 (0 0) 或 者 (left top) 等 。 
关键 字 包括 top、bottom、center、left 和 right。 

radius: 设置 径 向 渐变 的 长 度 ， 该 参数 为 一 个 数值 。 

stop: 定义 渐变 色 和 步 长 。 包 括 3 个 值 ， 即 开始 的 颜色 ， 使 用 from(colorvalue) 函 数 定义 ; 结 
束 的 颜色 ， 使 用 to(colorvalue) 函 数 定义 ; 颜色 步 长 ， 使 用 color-stop(value, color value) 函 数 定 
义 。color-stop0 函 数 包含 两 个 参数 值 ， 第 一 个 参数 值 为 一 个 数值 或 者 百分比 值 ， 取 值 范 围 在 
| 0 一 1.0 (或 者 0 一 100%) ， 第 二 个 参数 值 表示 任意 颜色 值 。 

| 【示例 2】 下 面 示例 设计 一 个 红色 圆 球 ， 并 逐步 径 向 渐变 为 绿色 背景 ， 兼 容 早 期 Webkit 引擎 的 线 
| 性 渐变 实现 方法 。 代 码 如 下 所 示 : 


加 加 
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<style type="text/css"> 
#demo { 

height:200px: 

谨 Webkit 引擎 私有 用 法 */ 

background: -webkit-eradient(radial, center center 0. center center, 100, from(red). to(green)); | 儒生 

background: radial-gradient(circle 100px. red, green): /* 标准 的 用 法 */ 全 
} 
</style> 
<div id="demo"></div> | 


演示 效果 如 图 11.11 所 示 。 





3 localhost8090/mysit: x 





图 11.10 设计 简单 的 径 向 渐变 效果 图 11.11 设计 径 向 圆 球 效果 

另外 ，Webkit 引擎 也 支持 -webkit-radial-gradient0 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函 | 

数 radial-gradientO 语 法 格式 类 似 。 简 明 语 法 格式 如 下 : | 
-Webkit-radial-gradient(position. shape size, color-stop1. color-stop2, ...): 

Gecko 引擎 定义 了 -moz-radial-gradientO 私 有 函数 来 设计 径 向 渐变 。 该 函数 用 法 与 标准 函数 

radial-gradientO 语 法 格式 也 类 似 。 简 明 语 法 格式 如 下 : 

-moz-radial-gradient(position. shape size, color-stop1. color-stop2. ...): | 

安 提示 : 上 面 两 个 私有 函数 的 size 参数 值 仅 可 设置 关键 字 : closest-side、 closest-corner、 farthest-side、 

| 


farthest-corner、contain 或 cover。 


11.2.5 ”设计 径 向 渐变 样式 

本 节 以 案例 形式 介绍 径 向 渐变 的 灵活 设置 , 熟练 掌握 设计 径 向 
渐变 的 一 般 方法 。 

示例 详细 代码 与 解说 请 扫 码 阅读 。 
11.2.6 ”定义 重复 径 向 渐变 

使 用 repeating-radial-gradient0) 函 数 可 以 定义 重复 线性 渐变 ， 用 法 
与 radial-gradient() 函 数 相同 ， 用 户 可 以 参考 上 面 说 明 。 

演示 示例 与 说 明 请 扫 码 阅读 。 
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113 案例 实战 


| 本 节 将 通过 多 个 较 复杂 案例 练习 背景 样式 的 实际 应 用 。 
Note 网 
加 11.3.1 设计 条 纹 背景 


如 果 多 个 色 点 设置 相同 的 起 点 位 置 , 它们 将 产生 一 个 从 一 种 颜色 到 另 一 种 颜色 的 急剧 转换 。 从 效 
果 来 看 ， 就 是 从 一 种 颜色 突然 改变 到 另 一 种 颜色 ， 这 样 可 以 设计 条 纹 背景 效果 。 
【示例 1】 定 义 一 个 简单 的 条 纹 背 景 ， 效 果 如 图 11.12 所 示 。 
<style type= "text/css"> 
#demo { 
height:200px: 
background: linear-gradient(#cd6600 50%, #0067cd 50%); 





} 
</style> 
<div id="demo"></div> 
【示例 2】 利 用 背景 的 重复 机 制 ， 可 以 创造 出 更 多 的 条 纹 。 示 例 代 码 如 下 所 示 : 
#demo { 
height:200px: 
background: linear-gradient(#cd6600 50%,. #0067cd 50%):; 
background-size: 100% 20%6: /* 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 
} 


效果 如 图 11.13 所 示 。 这 样 就 可 以 将 整个 背景 划分 为 10 个 条 纹 ， 每 个 条 纹 的 高 度 一 样 。 





11.12 设计 简单 的 条 纹 效 果 11.13 ”设计 重复 显示 的 条 纹 效果 
| 【示例 3】 如 果 设 计 每 个 条 纹 高 度 不 同 ， 只 要 改变 比例 即 可 ， 示 例 代码 如 下 所 示 : 
| 
| #demo { 
| height:200px: 
background: linear-gradient(#cd6600 8096. #0067cd 0%): * 定 义 每 个 条 纹 位 置 占 比 不 同 */ 
background-size: 100% 20%: 让 定义 单个 条 纹 仅 显示 高 度 的 五 分 之 一 */ 


} 


| 
效果 如 图 11.14 所 示 。 
| 【示例 4] 设计 多 色 条 纹 背景 ， 代 码 如 下 所 示 : 
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#demo { 


height:200px: 
人 # 定义 三 色 同 宽 背 景 */ 
background: linear-gradient(#cd6600 33.396. #0067cd 0. #0067cd 66.6%. #00cd66 0): 
backeround-size: 100% 30px:; 
} 


效果 如 图 11.15 所 示 。 





四 ee 四 Eee yr 





图 11.14 设计 不 同 高 度 的 条 纹 效果 图 11.15 设计 多 色 条 纹 效果 
【示例 5】 设 计 密集 条 纹 格 效果 ， 代 码 如 下 所 示 : 


| 
| 
| 

Er nt ee (0 rr | 

background-size: 100% 3px: | 
} 

| 

效果 如 图 11.16 所 示 。 | 

< 注意 ， IE 不 支持 这 种 设计 效果 。 | 
【示例 6】 设 计 垂直 条 纹 背景 ， 只 需要 转换 一 下 宽 和 高 的 设置 方式 ， 具 体 代码 如 下 所 示 : 

#demo { | 
height:200px: | 
background: linear-gradient(to right. #cd6600 50%. #0067cd 0): | 

background-size: 20% 100%: 

} 
效果 如 图 11.17 所 示 。 


D localhostB000/myite x NS 


© & localnosta080/mysite/testS.html 


Ca - Sounocahont -ac 



































































































































图 11.16 设计 密集 条 纹 效果 图 11.17 ”设计 垂直 条 纹 效果 
【示例 7】 设 计 简单 的 纹理 背景 ， 代 码 如 下 所 示 : 
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| demo { 
| height:200px: 

| background: linear-gradient(45deg, RGBA(0.103,205.0.2) 50%. RGBA(0.103,205.0.1) 50%): 
background-size: SOpx S0px: 


A 
| 效果 如 图 11.18 所 示 。 
ee 





| 图 11.18 设计 简单 的 纹理 效果 
”党 提示 : 在 实际 应 用 中 ， 不 建议 使 用 太 多 的 背景 色 ， 一 般 可 以 考虑 使 用 一 种 背景 色 ， 并 在 这 个 闫 色 


的 深浅 上 设计 变化 。 


11.3.2 设计 网 页 背景 色 


【示例 1】 为 页 面倒 加 多 个 径 向 渐变 背景 ， 可 以 营造 虚幻 的 页 面 氛围 。 本 节 示 例 代 码 如 下 所 示 : 


<style type="text/css"> 
html, body{ height:100%:} 
body { 
| background-color: #4B770A: 
| background-image: 
| Tadial-gradient( rgba(255. 255. 255. 0.3). rgba(255. 255. 255. 0)). 
Tadial-gradient(at 10% 5%. rgba(255. 255. 255. 0.1). rgba(255. 255. 255. 0) 20%). 
radial-gradient(at left bottom , rgba(255. 255. 255. 0.2), rgba(255, 255. 255. 0) 20%). 
| Tadial-gradient(at right top. rgba(255, 255. 255. 0.2). rgba(255. 255. 255. 0) 20%). 
| Tadial-gradient(at 85% 90% . Tgba(255. 255. 255. 0.1). Tgba(255. 255. 255. 0) 20%%): 
| 
| 





预览 效果 如 图 11.19 所 示 。 
| 在 上 面 示例 代码 中 ， 首 先 设计 body 高 度 满 屏 显示 ， 避 免 无 内 容 时 看 不 到 效果 ;然后 为 页 面 定义 
一 个 基本 色 #4B770A; 再 设计 了 5 个 径 向 渐变 ， 分 别 散布 于 页 面 4 个 顶 角 ， 以 及 中 央 位 置 ， 同 时 定义 
| 径 向 渐变 的 第 一 个 颜色 为 半 透 明 的 白色 ， 第 二 个 颜色 为 透明 色 ， 从 而 在 页 面 不 同位 置 蒙 上 轻重 不 一 的 
| 白粉 效果 ， 以 此 来 模拟 虚幻 英 测 的 背景 效果 。 
【示例 2】 为 页 面 益 加 4 个 径 向 渐变 背景 ， 设 计 密密麻麻 的 针脚 纹理 效果 。 本 节 示例 代码 如 下 


| 

| <style type="text/css"> 

| html body{ height100%;} 
body { 
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CS | 
background-color: #282828: 
backeground-image: 
-webkit-radial-gradient(black 15%,. transparent 16%). 
-webkit-radial-gradient(black 15%,. transparent 16%). 
-webkit-radial-gradient(reba(255, 255. 255, 0.1) 15%, transparent 20%)., 
-webkit-radial-gradient(rgba(255, 255. 255. 0.1) 15%. transparent 20%); 
background-image: 
Tadial-gradient(black 15%. transparent 16%), | 
Tadial-gradient(black 15%,. transparent 16%), | 
radial-gradient(rgba(255, 255. 255, 0.1) 15%, transparent 20%). | 
radial-gradient(rgba(255. 255. 255. 0.1) 15%6, transparent 2096): 
background-position: 





8pX 9px: 
background-size: 16px 16px: 
} 
</style> 


| 

| 

预览 效果 如 图 11.20 所 示 。 | 
x -| | 





11.19 设计 多 个 径 向 渐变 背景 效果 11.20 ”设计 针脚 纹理 背景 效果 

在 上 面 示例 中 ,首先 使 用 “background-size: 16px 16px;” 定 义 背 景 图 大 小 为 16 
X16 像素 ;在 这 块 小 图 上 设计 4 个 径 向 渐变 ， 包 括 2 个 深 色 径 向 渐变 和 2 个 浅 色 
径 向 渐变 ， 使 用 “background-position: 0 0px, 8px 8px, 0 1px, 8px 9px; ”设计 一 深 、 
一 浅 径 向 渐变 错位 谷 加 ， 在 y 轴 上 错位 1 个 像素 ， 从 而 在 16X 16 像素 大 小 的 浅 色 
背景 图 上 设计 了 2 个 深 色 四 陷 效果 ; 最 后 ， 借 助 背景 图 平 铺 ， 为 网 页 设计 上 述 纹 
理 特效 。 | 
11.3.3 ”设计 图 标 

本 例 通 过 CSS3 径 向 渐变 制作 圆 形 图 标 特效 ， 设 计 效 果 如 图 11.21 所 示 。 在 内 部 样式 表 中 ， 使 用 
Tadial-gradient0 函 数 为 图 标 标签 定义 径 向 渐变 背景 ， 设 计 立 体 效 果 ; 使 用 “border-radius:50%;” 声 明 


定义 图 标 显示 为 圆 形 ; 使 用 box-shadow 属性 为 图 标 添加 投影 使 用 text-shadow 属性 为 图 标 文本 定义 
润 边 效果 ; 使 用 radial-gradient 属性 设计 环形 径 向 渐变 效果 ， 为 图 标 添加 高 亮 特效 。 
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| 图 11.21 设计 径 向 渐变 图 标 效果 
示例 主要 代码 如 下 : 


| <style type="text/css"> 
| icon { 
| 人 固定 大 小 ， 可 根据 实际 需要 酌情 调整 ， 调 整 时 应 同步 调整 line-height:60px; */ 
| ‘width: 60px; height 60px: 
入 行内 块 显 示 ， 统 一 图 标 显示 属性 */ 
display:inline-block: 
上 # 清除 边框 ， 避 免 边框 对 整体 特效 的 破坏 */ 
border: none; 
谨 设计 圆 形 效果 */ 
border-radius: 50%:; 
谨 定义 图 标 阴影 ， 第 一 个 外 阴影 设计 立体 效果 ， 第 二 个 内 阴影 设计 高 亮 特效 */ 
| box-shadow: 0 1px Spx rgba(255,255,255.,.5) inset, 
| 0 -2px 5px Tgba(0.0.0..3) inset, 0 3px 8px ITgba(0.0.0..8): 
| 证 定义 径 向 渐变 ， 模 拟 明 暗 变 化 的 表面 效果 */ 
| background: -webkit-radial-gradient( circle at top center, #f28fb8, #e982ad, #ec568c); 
d: radial-gradient(circle at top center. #f28fb8. #e982ad., #ec568c); 
证 定义 图 标 字体 样式 */ 
font-size: 32px: 
| color: #dd5183; 
| text-align:center: 上 文本 水 平 居中 显示 */ 
| line-height:60px: 。/* 文本 垂直 居中 显示 ， 必 须 与 “height: 60px:” 保 持 一 致 */ 
上 # 为 文本 添加 阴影 ， 第 一 个 阴影 设计 立体 效果 ， 第 二 个 阴影 定义 高 亮 特效 */ 
text-shadow: 0 3px 10px #fla2c1. 
0 -3px 10px #f1a2cl1: 


| 

syle> 

| <div class="icon">Dw</div> 
‘<span class="icon">Fl</span> 
<p class="icon">PS</p> 





| 渐变 可 以 用 在 包括 border-image-source、background-image、ist-style-image、cursor 等 属性 上 ， 用 
| 来 取代 url 属性 值 。 前 面 各 节 主要 针对 background-image 属性 进行 介绍 ， 下 面 结合 示例 介绍 其 他 属性 
| 的 应 用 情形 。 

定义 渐变 效果 的 边框 

【示例 1】 本 例 通 过 CSS3 渐变 为 border-image 属性 定义 渐变 边框 ， 效 果 如 图 11.22 所 示 。 
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<style type="text/css"> 

div{ 
width: 400px: 
height: 200px; 
margin: 20px: 
border: solid #000 50px: 
-webkit-border-image:-webkit-linear-gradient(yellow., blue 20%, #0f0) 50: /*Safari 5.1- 6.0 */ 
-0-border-image: -0-linear-gradient(yellow. blue 20%, #0f0) 50: /*Opera 11.1 - 12.0*/ 
-moz-border-image: -moz-linear-gradient(yellow. blue 20%. #0f0) 50:  /* Firefox 3.6- 15 */ | 
border-image: linear-gradient(yellow. blue 20%. #0f0) 50: 上 # 标准 语法 */ | 





</style> 
<div></div> 








图 11.22 设计 渐变 边框 效果 


加 ”定义 填充 内 容 效果 
【示例 2】 本 示例 通过 content 属性 ， 为 <div class="divl"> 标 签 嵌入 一 个 通过 渐变 设计 的 圆 球 ， 同 
时 为 这 个 包含 框 设计 一 个 渐变 背景 ， 从 而 产生 一 种 透视 框 的 效果 ， 如 图 11.23 所 示 (testl.html)。 
<style type="text/css"> 
:divl {/* 设计 包含 框 的 外 形 和 大 小 */ 
width: 400px: height: 200px: 
border: 20px solid #A7D30C: 


} | 
.divl:before { | 
人 # 在 div 元 素 前 插入 内 容 对 象 ， 在 该 对 象 中 绘制 一 个 背景 图 形 ， 并 定义 显示 边框 效果 */ | 
/* Safari 5.1 - 6.0 */ 
content: -webkit-radial-gradient(left bottom. farthest-side. #f00. #f99 60px. #005): 
Opera11.6-12.0*/ 
content: -0-radial-gradient(left bottom. farthest-side, #f00. #f99 60px. #005): 
/* Firefox 3.6- 15 */ 
content: -moz-radial-eradient(left bottom. farthest-side. #f00. #f99 60px. #005): 
请 标准 语法 */ 
content: radial-gradient(farthest-side at left bottom. #f00. #f99 60px. #005): 
} | 
</style> | 
<div class="div1"></div> L 
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| 可 定义 列表 图 标 
| 【示例 3】 本 示例 通过 list-style-image 属性 ， 为 u 元 素 定义 自 定义 图 标 ， 该 图 标 通过 渐变 特效 进 
| 行 绘制 ， 从 而 产生 一 种 精致 的 二 色 效 果 ， 演 示 效 果 如 图 11.24 所 示 。 


| <style type="text/css"> 
| ul { list-style-image: linear-gradient(red 50%, blue 50%):} 


2 
<ul> 


| <li>HTML5</li> 
| <li>Css3</i> 

<li>JavaScript</li> 
</ul> 
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ek | 
示例 效果 图 11.23 插入 球形 内 容 填充 物 并 显示 边框 效 果 图 11.24 ”设计 项 目 符号 效果 


.3.5 设计 折 角 栏目 


灵活 使 用 CSS3 渐变 背景 ， 可 以 设计 出 很 多 新 颖 的 效果 。 
【示例 1】 使 用 线性 渐变 设计 右上 角 缺 角 的 栏目 ， 效 果 如 图 11.25 所 示 。 


| 
| <style type="text/css"> 
| .box { 

background: linear-gradient(-135deg. transparent 30px. #162e48 30px): 

color: #fff: 

padding: 12px 24px: 
} 
</style> 
<div class="box"> 

<hl>W3C 发 布 HTMLS5 的 正式 推荐 标准 </h1> 
| <p>2014 年 10 月 28 日 ，W3C 的 HTML 工作 组 正式 发 布 了 HIMLS 的 正式 推荐 标准 (W3C 
”Recommendation)。W3C 在 美国 圣 克 拉 拉 举 行 的 W3C 技术 大 会 及 顾问 委员 会 会 议 (TPAC 2014) 上 宣布 了 这 一 
| 消息 。 HTMLS5 是 万 维 网 的 核心 语言 一 可 扩展 标记 语言 的 第 $ 版 。 在 这 一 版 本 中 ， 增 加 了 支持 Web 应 用 开发 
| 者 的 许多 新 特性 ， 以 及 更 符合 开发 者 使 用 习惯 的 新 元 素 ， 并 重点 关注 定义 清晰 的 、 一 致 的 准则 ， 以 确保 Web 应 
| | 用 和 内 容 在 不 同 用 户 代理 (浏览 器 ) 中 的 互 操作 性 。HTMLS5 是 构建 开放 Web 平台 的 核心 。</p> 

<p class"right"> 更 多 <a hre 人 "http://www.chinaw3c.org/archives/677/" target=" blank"> 详 细 内 容 </a></p> 
</div> 


【示例 2】 使 用 线性 渐变 设计 右上 角 补 角 的 栏目 ， 效 果 如 图 11.26 所 示 。 


<style type="text/css"> 
box { 
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U 


| 

background: linear-eradient(-135deg, #f00 30px. #ffF 30px, #162e48 32px); | 
color: #ffF: | 
padding: 12px 24px: | 

} | 
</style> | 


@l 























更 多 





图 11.25 ”设计 缺 角 栏目 效果 图 11.26 设计 补 角 栏 目 效果 


【示例 3】 使 用 box-shadow 为 栏目 加 上 高 亮 边框 ， 同 时 需要 设计 网 页 背景 色 为 深 色 ， 效 果 如 
图 11.27 所 示 。 


<style type="text/css"> 
body { background:#000:} 
.box { 
background: linear-gradient(-135deg. #f00 30px. #fff 30px. #162e48 32px); 
color: #ffF: 
padding: 12px 24px: 
box-shadow: 0 0 1px 1px #fff inset': 
} 
</style> 


【示例 4】 我 们 无 法 直接 为 缺 角 栏目 设计 边框 线 效果 ， 考 虑 到 兼容 性 问题 ， 可 以 使 用 :before | 
和 :after 实现 该 效果 。 ， 网 页 背景 色 为 深 色 ， 与 .box:after 边框 色 保持 一 致 ， 如 图 11.28 所 示 。 


<style type="text/css"> 
body { background: #000: } 
.box { 
background: #162e48; 
color: #ffF: 
padding: 12px 24px: 
position: relative: 
border: 1px solid #EEE 





} 

.box:before { 
content: '': 
border: solid transparent: 
Pposition: absolute: 
border-width: 30px: 
border-top-color: #ff: 
border-right-color: #fff: 
Tight: Opx: 
top: Opx: 

} 


.box:after { 
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content: '': 


| 
| border: solid transparent: 
| position: absolute: 
border-width: 30px: 
border-top-color: #000: 
border-right-color: #000; 
top: -1px: 

Tight: -1px: 














准 
性 HTML5 是 相 建 开 
更 多 








图 11.27 ”设计 高 亮 边框 栏目 效果 图 11.28 设计 缺 角 边 框 栏目 效果 


| 【操作 步骤 】 
| 第 1 步 ， 在 示例 4 中 ， 首 先 使 用 -box:before 在 容器 内 容 前 面 插入 一 个 粗 边 框 对 象 ， 白 色 边 框 ， 宽 
度 为 30 像素 ， 由 于 内 容 为 空 “content: '';”， 则 收缩 为 一 团 ， 显 示 效 果 如 图 11.29 所 示 。 
第 2 步 ， 使 用 绝对 定位 ， 精 确定 位 到 右上 角 显示 ， 如 图 11.30 所 示 。 
- -下 到 | 















SS mechornssr -ac| = -er 








图 11.29 设计 三 角 填 充 物 图 11.30 ”定位 三 角 填 充 物 到 栏目 右上 角 


| 第 3 步 ， 使 用 .box:after 在 栏目 内 容 的 后 面 插入 一 个 同样 大 小 的 三 角形 填充 物 ， 边 框 色 为 背景 色 ， 
| 即 黑色 ， 如 图 11.31 所 示 。 














图 11.31 再 插入 一 个 黑色 三 角 填 充 物 
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第 4 步 ， 使 用 绝对 定位 精确 定位 到 右上 角 显 示 ， 并 向 右上 角 偏 移 1 个 像素 ， 造 盖 住 白色 
一 条 白色 缝隙 ， 即 可 完成 本 例 效果 设计 。 


11.3.6 ”设计 优惠 券 


本 例 使 用 径 向 渐变 设计 一 张 优 惠 券 效果 ， 如 图 11.32 所 示 。 

先 了 解 本 示例 的 HIML 结构 : 整个 界面 包裹 在 <div 
class="stamp stamp_yellow"> 标 签 , stamp 类 样式 定制 优惠 券 结 
构 样 式 , stamp_yellow 类 样式 定制 优惠 券 风格 样式 , 即 配色 效 
果 ; 在 该 包含 框 中 嵌入 了 两 个 子 结构 ，<div class="par"> 负 责 
设计 左 侧 文 本 显示 ，<div class="copy"> 负 责 定制 右 侧 信 息 ; 
在 包含 框 的 底部 嵌入 一 个 <i> 标 签 ， 该 标签 负责 设计 优惠 券 右 








全 


ore 


轩 :mpn ] 


| 
下 高 亮 显示 面 。 图 11.32 设计 优惠 券 效 果 | 
示例 主要 代码 如 下 样式 代码 解读 请 参考 注释 文本 ): | 
<style type="text/css"> | 
人 # 通 用 类 样式 类 | 
‘stamp { | 
width: 387px: height 140px: /# 固定 大 小 ， 方 便 设计 */ | 
padding: 0 10px: 上 # 左右 留 出 10 像素 空间 ， 用 来 设计 锯齿 边沿 效果 */ | 
position: relative: 上 # 相对 定位 ， 定 义 定位 包含 框 ， 方 便 内 部 对 象 定位 显示 */ | 
overflow: hidden: 上 # 禁止 超出 显示 ， 避 免 破 坏 券 面 布局 */ | 
} | 
.stamp:before {/* 设计 底 色 */ | 
content: ", 雍 设计 一 个 空 的 内 容 层 */ | 
position: absolute; 上 # 绝对 定位 显示 */ | 
Z-index: -1: 上 # 让 该 层 显示 在 文本 的 下 面 */ | 
top: 0: 上 # 定义 大 小 ， 顶 部 对 齐 */ | 
bottom: 0; 此 定义 大 小 ， 底 部 对 齐 */ | 
left: 10px: 人 # 定义 大 小 ， 左 侧 留 白 10 像素 */ | 
right: 10px: 此 定义 大 小 ， 右 侧 留 白 10 像素 */ | 
} | 
.stamp:after {/* 设计 底 色 阴 影 */ | 
content: ": 证 设计 一 个 空 的 内 容 层 */ 
Position: absolute: 庆 绝对 定位 显示 */ | 
left: 10px: 店 定义 大 小 ， 左 侧 留 白 10 像素 */ | 
top: 10px: 庆 定义 大 小 ， 顶 部 留 白 10 像素 */ | 
Tight: 10px: 片 定义 大 小 ， 右 侧 留 白 10 像素 */ 
bottom: 10px: 上 # 定义 大 小 ， 底 部 留 白 10 像素 */ 
box-shadow: 0 0 20px 1px rgba(0. 0. 0. 0.5): /* 为 左右 锯齿 设计 阴影 效果 */ 
Z-index: -2: 上 # 设计 该 层 显 示 在 最 底部 */ | 
} 1 
.stamp its 设计 高 亮 面 */ | 
Pposition: absolute: 片 绝对 定位 显示 */ | 
left: 20%; top: 45px: 上 # 显示 位 置 *#/ | 
height: 190px: width: 390px: 上 # 定义 大 小 村 | 
background-color: rgba(255,255.255,.15):/* 定义 淡淡 的 高 亮色 */ | 
transform: rotate(-30deg): 上 庆 旋转 角度 ， 覆 盖 在 右 下 面 显示 */ | 
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| 
| 
| .stamp .par {/* 设计 左 侧 文本 样式 */ 
| float: left: 

padding: 16px 15px: 

width: 220px: 

border-right: 2px dashed rgba(255.255.255,.3): 
text-align: left: 





| .Stamp .par p { color: #fff margin:6px 0: } 
| .Stamp .par span {/* 设计 金额 样式 */ 
font-size: S0pX: 
| color f#TF 
| margin-right: Spx; 
| } 
| .stamp .par .sign { font-size: 34pX: } 
.Stamp .par sub { 
Pposition: relative:; 
top: -5px; 
color: Tgba(255,255.255..8): 
} 
.Stamp .copy { 
display: inline-block: 
padding: 21px 14px; 
| width: 100px: 
| Vertical-align: text-bottom:; 
| font-size: 30px: 
color: rgb(255,255.255); 
padding: 10px 6px 10px 12px: 
font-size: 24px: 


| 

| stamp .copyp { 

| font-size: 13px; 
margin-top: 12px: 
margin-bottom: 16px: 


| .stamp .copy a { 

| background-color: #fEF 

| color: #333; 
font-size: 14px: 
text-decoration: none; 

| text-align:center: 

| padding: 5px 10px: 

| border-radius: 4px: 

| display: block: 


} 
记 设 计 风 格 */ 
性 忽 黄 */ 


background: #F39BO0:; 
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上 # 在 正 、 副 券 绘 制 一 条 垂直 虚线 */ 


证 设计 正文 文本 样式 */ 


上 # 设计 人 民 币 符号 样式 */ 
证 相对 定位 ， 方 便 移 位 */ 
上 # 下 移 ， 底 部 对 齐 */ 


上 # 设计 右 侧 文本 样式 */ 


语 设计 扁平 化 按钮 样式 */ 


:stamp yellow ”{/* 正文 背景 样式 ， 通 过 径 向 渐变 定义 圆 形 纹理 背景 */ 


backeround: radial-eradient(rgba(0. 0. 0. 0) 0. Tgba(0. 0. 0. 0) Spx, #39B00 Spx): 
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background-size: 15px 15px: 让 定义 每 个 圆 形 大 小 */ 
background-position: 9px 3px: 证 左右 两 侧 显 示 圆 孔 形 背 景 */ 


} 

谨 设计 正文 部 分 仅 显示 单 色 背景 ， 左 右边 沿 显示 圆 孔 锯齿 背景 */ 
.stamp yellow:before { background-color: #F39B00: } 

</style> 

<div Class="stamp stamp yellow"> 


<div class="par"> 
<p> 上 品 折扣 店 </p> | 
<sub class="sign"> 于 </sub><span>50.00</span><sub> 优 惠 券 </sub> | 
<p> 订 单 满 100.00 元 </p> 
</div> 





2018-06-18</p> 
<a href="#"> 立 即使 用 </a></div> 
<i></> 

<div> | 
| 

在 上 面 示例 基础 上 ， 用 户 可 以 设计 不 同 风格 的 界面 效果 。 例 如 ， 重 新 定义 主题 风格 样式 ， 可 以 拓 | 
展 更 多 主题 的 优惠 券 。 主 要 技巧 在 于 修改 正文 背景 色 ， 以 及 径 向 渐变 的 第 二 个 颜色 ， 效 果 如 图 11.33 | 
所 示 (test2.html)。 | 


CE © 8 ho /hocalhost 000 /mysite est nem 


上 品 折扣 店 


500 E00 | 
| 
| 


订单 满 I00006 


上 品 折 扣 店 上 品 折扣 店 


ERLIAVIE BRIAUIES 


EL 订单 满 10000 亏 





图 11.33 设计 不 同 风格 的 优惠 券 效果 
刻 浅 红 */ 


.Stamp Ted { 
background: #D24161; 


.stamp_red:before { background-color: #D24161: } 
人 # 浅 绿 所 


background: #7EAB1E: 
background: radial-eradient(transparent 0. transparent Spx. #7EAB1E Spx): 
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| background-size: 15px 15px: 
| backeround-position: 9px 3px: 
| 

} 

| 
.stamp_green:before { backeround-color: #7EAB1E: } 


全 站 户 天 蓝 */ 


| .stamp_blue { 


width: 390px: 
bakaommt hs0ADD3: 
| background: radial-gradient(rgba(0, 0. 0. 0) 0. reba(0. 0. 0. 0) 4px, #50ADD3 4px); 
background-size: 12px 8px; 
background-position: -Spx 10px:; 
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.stamp_blue:before { background-color #50ADD3: } 


11.4 在 线 练 习 
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使 用 CSS3 美化 列表 和 超 链接 样式 


在 默认 状态 下 ， 超 链接 文本 显示 为 蓝 色 、 下 划 线 ， 当 鼠标 指针 移 过 链接 对 象 时 显示 为 手 形 ， 
访问 过 的 超 链 接 文本 显示 为 紫色 ; 列表 项 目 缩 进 显示 ， 并 在 左 侧 显示 项 目 符号 。 在 网 页 设计 过 
程 中 ， 一 般 都 会 根据 个 人 喜好 和 实际 需要 重新 定义 超 链 接 和 列表 样式 


【学 习 要 点 】 


dl 


吾 吾 于 


正确 使 用 行为 伪 类 

能 够 灵活 设计 符合 页 面 风 格 的 链接 样式 
定义 列表 样式 

能 够 根据 页 面 风 格 设计 列表 莱 单 样式 


2 A 


12.1 设计 超 链接 样式 


| 下面 介绍 如 何 使 用 CSS3 设计 超 链接 的 基本 样式 。 
Note 区 


在 网 页 设计 中 ， 用 户 可 以 使 用 CSS3 的 动态 伪 类 选择 器 定义 超 链接 的 4 种 状态 样式 。 

a:link: 定义 超 链接 的 默认 样式 。 

回 arvisited: 定义 超 链接 被 访问 后 的 样式 。 

回 ahover: 定义 光标 指针 移 过 超 链接 时 的 样式 。 

aiactive: 定义 超 链接 被 激活 时 的 样式 。 

【示例 】 在 下 面 示例 中 ， 定 义 页 面 所 有 超 链接 默认 为 红色 下 划 线 效果 ， 当 鼠标 经 过 时 显示 为 绿色 
下 划 线 效果 ,而 当 单 击 超 链接 时 则 显示 为 黄色 下 划 线 效果 , 超 链接 被 访问 过 之 后 显示 为 蓝 色 下 划 线 效 









| 果 ， 演 示 效 果 如 图 12.1 所 示 。 


| 

| <style type="text/css"> 

| alink {color: 三 F0000: 诊 红色 */} /* 超 链接 默认 样式 */ 

| aiVisited {color: #0000FF: 旋 蓝 色 */} /* 超 链接 被 访问 后 的 样式 */ 
| ahover {color: #00FFO0: 店 绿色 */}/* 鼠标 经 过 超 链接 的 样式 */ 
| aactive {color: #FFFFO0: 诺 黄色 */}/* 超 链接 被 激活 时 的 样式 */ 
<style> 

| <ul class="pl"> 


<li><a hre 伍 "#" class="al"> 首 页 </a></li> 
<li><a hre 伍 "#" class="a2"> 新 闻 </a></li> 
| <li><a hre 伍 "#" class="a3"> 微 博 </a></li> 
| </ul> 
| <ul class="p2"> 
<li><a hre 伍 "#" class="al"> 关 于 </a></li> 
<li><a hre 伍 "#" class="a2"> 版 权 </a></li> 
<li><a hre 伍 "#" class="a3"> 友 情 链接 </a></li> 


MS ocatcs P+ ao| sooro 





图 12.1 定义 超 链接 样式 


| 兰 提示 : 超 链 接 的 4 种 状态 样式 的 排列 顺序 是 固定 的 ,一 般 不 能 随意 调换 .正确 顺序 是 : link、 visited、 
| hover 和 active。 
| 


在 下 面 样式 中 ， 当 鼠标 经 过 超 链 接 时 ， 会 先 执行 第 一 行 声 明 ， 但 是 紧 接着 第 三 行 的 声明 会 覆盖 掉 
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第 一 行 和 第 二 行 声明 的 样式 ， 所 以 就 无 法 看 到 鼠标 经 过 和 被 激活 时 的 效果 。 

aal:hover {color: #00FF00:} 

aal:active {color: #EFFFO00:} 

a.al:link {color: #FF0000:} 

a.al:visited {color: #0000FF: } 

在 上 面 代码 中 ， 通 过 指定 类 型 选择 器 ， 限 定 上 面 4 个 样式 仅 作用 于 包含 al 类 的 超 链接 中 。 

当然 ， 用户 可 以 根据 需要 仅 定 义 部 分 状态 样式 。 例如 ， 当 要 把 未 访问 的 和 已 经 访问 的 链接 定义 成 | 
相同 的 样式 ， 则 可 以 定义 link、hover 和 active 三 种 状态 。 | 

a.al:link {color: #EFF0000:} 

a.al:hover {color: #00FFO00:} 

a.al:active {color: #FFFFO00:} 

如 果 仅 希望 超 链接 显示 两 种 状态 样式 ， 可 以 使 用 a 和 hover 来 定义 。 其 中 a 标签 选择 器 定义 a 元 
素 的 默认 显示 样式 ， 然 后 定义 鼠标 经 过 时 的 样式 。 

a {color: 证 F0000:} 

ahover {color: #00FF00:} 

但 是 如 果 页 面 中 包含 锚 记 对 象 ， 将 会 影响 锚 记 的 样式 。 如 果 定义 如 下 的 样式 ， 则 仅 影响 超 链接 未 
访问 时 的 样式 和 鼠标 经 过 时 的 样式 。 

alink {color: #FF0000:} 

a:hover {color: #00FF00:} 


12.1.2 ”定义 下 划 线 样式 


在 设计 超 链接 样式 时 ， 下 划 线 一 直 是 一 个 重要 效果 ， 巧 妙 结合 下 划 线 、 边 框 和 背景 图 像 可 以 设计 | 
出 很 多 富有 个 性 的 样式 。 例 如 ， 定 义 下 划 线 的 色彩 、 下 划 线 距离 、 下 划 线 长 度 和 对 齐 方式 ， 以 及 定制 | 
双 下 划 线 等。 | 

如 果 用 户 不 喜欢 超 链接 文本 的 下 划 线 样式 ， 可 以 使 用 CSS3 的 text-decoration 属性 进行 清除 。 | 

a tl 完全 清除 超 链接 的 下 划 线 效果 */ | 

text-decoration:none: 








} 

从 用 户 体 验 的 角度 考虑 ， 在 取消 默认 的 下 划 线 之 后 ， 应 确保 浏览 者 可 以 识别 所 有 超 链接 ， 如 加 粗 
显示 、 变 色 、 缩 放 、 高 亮 背 景 等 。 也 可 以 设计 当 鼠 标 经 过 时 增加 下 划 线 ， 因 为 下 划 线 具有 很 好 的 提示 
作用 。 

ahover {/* 鼠标 经 过 时 显示 下 划 线 效果 */ 

text-decoration:underline; | 

} | 

下 划 线 样式 不 仅仅 是 一 条 实 线 ， 可 以 根据 需要 自 定义 设计 。 主 要 设计 思路 如 下 : | 

加 ”借助 <a> 标 签 的 底 边 框 线 来 实现 。 

加 ”利用 背景 图 像 来 实现 ， 背 景 图 像 可 以 设计 出 更 多 精巧 的 下 划 线 样式 。 | 

【示例 1】 下 面 示例 设计 当 鼠 标 经 过 超 链接 文本 时 显示 为 下 划 虚 线 、 字 体 加 粗 、 色彩 高 亮 的 效果 ， | 
如 图 12.2 所 示 。 人 














"247 


Eee Lee 从 入 门 到 精通 ( 微 课 精 编 版 ) 


<style type="text/css"> 
a {/* 超 链接 的 默认 样式 */ 
text-decoration:none; 上 # 清除 超 链接 下 划 线 */ 
| color:#999; /* 浅 灰色 文字 效果 */} 
各 ahover [* 民 标 经 过 时 样式 */ 
| border-bottom:dashed lpx red: 庆 鼠标 经 过 时 显示 虚 下 划 线 效果 */ 
color:#000: 让 加 重 颜色 显示 */ 

| font-weight:bold: 上 * 加 粗 字体 显示 */ 

| zoom:1; 上 # 解决 正 浏 览 器 无 法 显示 问题 */ 
} 
</style> 
<ul class="pl"> 


<li><a href="#" class="al"> 首 页 </a></li> 

<li><a href="#" class="a2"> 新 闻 </a></li> 

<li><a hre 仁 "#" class="a3"> 微 博 </a></li> 
</ul> 


| 【示例 2】 也 可 以 使 用 CSS3 的 border-bottom 属性 定义 超 链 接 文本 的 下 划 线 样式 。 下 面 示例 定义 
| 超 链接 始终 显示 为 下 划 线 效果 ， 并 通过 颜色 变化 来 提示 鼠标 经 过 时 的 状态 变化 ， 效 果 如 图 12.3 所 示 。 


| <style type="text/css"> 
a {/* 超 链接 的 默认 样式 */ 
text-decoration:none: 上 # 清除 超 链接 下 划 线 */ 
| border-bottom:dashed 1px red: 片 红色 虚 下 划 线 效果 */ 
| color:#666; 庆 灰色 字体 效果 */ 
| zoom:1: /# 解决 正 浏览 器 无 法 显示 问题 */ 
| } 
a:hover {/* 鼠标 经 过 时 样式 */ 
color:#000; 上 # 加 重 颜色 显示 */ 
| border-bottom:dashed 1px #000: 证 改变 虚 下 划 线 的 颜色 */ 
| 
| } 
| 国王 


< en ee] 





图 12.2 定义 下 划 线 样式 1 图 12.3 定义 下 划 线 样式 2 


| 【示例 3】 使 用 CSS3 的 background 属性 可 以 借助 背景 图 定义 更 精致 、 个 性 的 下 划 线 样式 。 
| 第 1 步 ， 使 用 Photoshop 设计 一 条 虚线 (images/dashed.psd)， 设 计 图 像 高 度 为 1 像素 ， 宽 度 为 4 
| 像素、6 像素 或 8 像素 。 具 体 宽度 可 根据 虚线 的 疏 密 确定 。 

| 第 2 步 ， 在 Photoshop 中 ， 选 择 颜 色 以 跳 格 方式 进行 填充 ， 最 后 保存 为 GIF 格式 图 像 。 

| 第 3 步 ， 把 示例 2 另存 为 test3.html， 使 用 背景 图 代 蔡 “border-bottom:dashed 1px red;” 声 明 ， 主 
| 要 样式 代码 如 下 : 

| <style type="text/css"> 

| a {l* 超 链接 的 默认 样式 六 
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text-decoration:none:; 访 清除 超 链接 下 划 线 */ 
color:#666: /# 灰色 字体 效果 */ 


} 

a:hover {/* 鼠标 经 过 时 样式 */ y 
color:#000: 上 # 加 重 颜色 显示 */ | 全 | 
人 # 定义 背景 图 像 ， 定 位 到 超 链 接 元 素 的 底部 ， 并 沿 x 轴 水 平平 铺 */ | 一 
background:url(images/dashed1 .gif) left bottom repeat-x: 





} 
</style> | 


第 4 步 ， 在 浏览 器 中 预览 ， 效 果 如 图 12.4 所 示 。 





图 12.4 背景 图 像 设 计 的 下 划 线 样式 
12.1.3 ”定义 特效 样式 


这 一 节 想 通 过 示例 介绍 如 何 为 超 链接 文本 设计 立体 视觉 效果 ， 主 要 是 借助 边框 颜色 的 深浅 错落 ， | 
模拟 一 种 凸凹 变化 的 立体 效果 。 
设计 技巧 如 下 : 
加 ”设置 右边 框 和 底 边 框 同 色 , 同时 设置 项 边框 和 左边 框 同色 , 利用 明暗 色彩 的 搭配 来 设计 立体 
效果 。 
回 ”设置 超 链 接 文本 的 背景 色 为 深 色 效果 ， 营 造 凸 起 效果 ， 当 鼠标 移 过 时 ， 再 定义 浅 色 背景 来 营 
造 目下 效果 。 
回 “为 网 页 设计 浅 色 背景 ， 再 定义 字体 颜色 来 烘托 立体 样式 。 
【示例 】 在 这 个 示例 中 定义 超 链接 在 默认 状态 下 显示 灰色 右边 和 底 边 框 线 效果 、 白 色 项 边 和 左 
边框 线 效果 。 而 当 鼠 标 移 过 时 ， 则 清除 右 侧 和 底部 边框 线 ， 并 定义 左 侧 和 顶部 边框 效果 ， 演 示 效 果 
如 图 12.5 所 示 。 





<style type="text/css"> | 
body { background:#fec: } 证 浅 色 网 页 背景 */ | 
ul {list-style-type: none: } 让 清除 项 目 符号 */ | 
li { margin: 0 2px: float left:} 诊 并 列 显示 */ | 
a {l* 超 链接 的 默认 样式 */ | 
text-decoration:none: 上 # 清除 超 链 接 下 划 线 */ 
border:solid 1px: 上 # 定义 1 像素 实 线 边框 */ 
padding: 0.4em 0.8em: /* 增加 超 链接 补 白 */ | 
color: #444: 访 定义 灰色 字体 */ | 
background: #f99: 片 超 链接 背景 色 */ | 
border-color: #ffF #aaab9c #aaab9c #fEF 上 # 分 配 边框 颜色 */ 
Zzoom:l: 片 解决 正 浏览 器 无 法 显示 问题 */ 


} 
a:hover {/* 鼠标 经 过 时 样式 */ 
color: #800000: 片 超 链接 字体 颜色 */ 
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background: transparent: 让 清除 超 链接 背景 色 */ 
border-color: #aaab9c #ffF#fFF#aaab9c: 上 # 分 配 边框 颜色 */ 





表 12.1 cursor 属性 取 值 说 明 


取 值 说 阴 
auto 基于 上 下 文 决定 应 该 显示 什么 光标 
crosshair 十 字 线 光标 (+) 
default 基于 平台 的 默认 光标 样式 。 通 常 泻 染 为 一 个 箭头 
pointer 指针 光标 ， 表 示 一 个 超 链接 
move 十 字 箭头 光标 ， 用 于 标示 对 象 可 被 移动 


e-resize 、 ne-resize 、 nw-resize 、 
Dr-Iesize 、 se-resize 、 sw-resize 、 | 表示 正在 移动 某 个 边 ， 如 se-resize 光标 用 来 表示 框 的 移动 开始 于 东南 角 


S-resize 、W-resize 


text 表示 可 以 选择 文本 。 通 常 泻 染 为 I 形 光标 

wait 表示 程序 正 忙 ， 需 要 用 户 等 待 ， 通 常 泻 染 为 手表 或 沙漏 

help 光标 下 的 对 象 包含 有 帮助 内 容 ， 通 常 泻 染 为 一 个 问号 或 一 个 气球 
<uri>URL 自 定义 光标 类 型 的 图 标 路 径 


如 果 自 定义 光标 样式 ， 建 议 使 用 绝对 或 相对 URL 地 址 指定 光标 文件 〈 后 组 为 .cur 或 者 .ani)。 
【示例 】 下 面 示例 在 内 部 样式 表 中 定义 多 个 鼠标 指针 类 样式 , 然后 为 表格 单元 格 应 用 不 同 的 类 样 


式 ， 完 整 代码 可 以 参考 本 节 示 例 源 代码 ， 示 例 演示 效果 如 图 12.6 所 示 。 


<style> 

.auto { cursor: auto: } 

.default { cursor: default: } 
none { cursor: none: } 
.Context-menu { cursor: context-menu; } 
.help { cursor: help: } 

pointer { cursor: pointer: } 
-progress { cursor: progress: } 
.Wait { cursor: wait: } 

.cell { cursor: cell: } 

.Crosshair { cursor: crosshair: } 
.text { cursor: text: } 
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‘Vertical-text { cursor: Vertical-text } 

-alias { cursor: alias: } | 

-COPY { cursor: copy: } | 

move { cursor move: } | & 

-no-drop { cursor: no-drop: } | 鲜 

.not-allowed { cursor not-allowed: } 人 

.e-resize { cursor: e-resize: } 

.D-Iesize { cursor: n-resize: } 

.ne-resize { cursor: ne-resize: } | 

nwW-resize { cursor: nw-resize: } | 

.S-Iesize{ cursor: s-resize; } | 

.Se-resize { cursor: se-resize: } 

.SW-resize { cursor: sw-resize; } 

.W-resize { cursor: W-Iesize: } | 

.ew-resize { cursor: ew-resize: } | 

.ns-resize { cursor: ns-resize; } | 

‘nesw-resize { cursor: nesw-resize; } | 

Wse-resize { cursor: nwse-resize: } | 
| 
| 
| 
| 
| 





.Col-resize { cursor: col-resize: } 

.IOW-Iesize { cursor: row-resize; } 

.all-scroll { cursor: all-scroll; } 

.Zoom-in { cursor: zoom-in: } 

.Zoom-out { cursor: zoom-out: } 

‘url { cursor: url(skin/cursor.gif). url(skin/cursor.png). url(skin/cursor.jpg). pointer: } 
</style> 


SE Somos 
cursor 光 标 类 型 
default context-menu help 


vertical-text 


Ti-resize NW-resize 


se-resize ew-resize nesw-resize 


col-resize 1 Url zoom-out 





12.6 ”比较 不 同 光标 样式 效果 


深 提 示 : 使 用 自 定义 图 像 作为 光标 类 型 ， 焉 和 Opera 浏览 器 只 支持 *.cur 等 特定 的 图 片 格式 ; 而 
Firefox、Chrome 和 Safari 浏览 器 婚 支 持 特定 图 片 类 型 ， 也 支持 常见 的 *jpg、*.gif 和 *jpg | 
等 图 片 格式 。 
cursor 属性 值 可 以 是 一 个 序列 ， 当 用 户 端 无 法 处 理 第 一 个 图 标 时 ， 它 会 尝试 处 理 第 二 个 、 | 
第 三 个 等 ,如 果 用 户 端 无 法 处 理 任何 定义 的 光标 , 它 必须 使 用 列表 最 后 的 通用 光标 . 例如 ， 
下 面 样式 中 就 定义 了 3 个 自 定义 动画 光标 文件 ， 最 后 定义 了 一 个 通用 光标 类 型 。 
aihover { cursor-url('images/1.ani). url(images/1. cur), url(images/1.gif). pointer:} 
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设计 列表 样式 


| EC 
SEE 
LD 
| 下 面 介绍 如 何 使 用 CSS3 设计 列表 的 基本 样式 。 
Note 
加 | 12.2.1 定义 项 目 符号 类 型 





值 说 明 如 表 12.2 所 示 。 





circle 

Square 

decimal 
lower-roman 
cjk-ideographic 
lower-greek 
hiragana 
katakana 
lower-latin 





表 12.2 list-style-type 属性 值 


说 阴 
实心 圆 ， 默 认 值 
空心 圆 
实心 方块 
阿拉 伯 数 字 
小 写 罗马 数字 
浅 白 的 表意 数字 
基本 的 希腊 小 写字 母 
日 文平 假名 字符 
日 文 片 假名 字符 
小 写 拉丁 字母 





属 性 值 
pper-roman 
lower-alpha 
pper-alpha 
none 
armenian 
georgian 
hebrew 
hiragana-iroha 
katakana-iroha 
pper-latin 





A 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


使 用 CSS3 的 list-style-type 属性 可 以 定义 列表 项 目 符号 的 类 型 ， 也 可 以 取消 项 目 符号 ， 该 属性 取 


说 了 明 
大 写 罗马 数字 
小 写 英文 字母 
大 写 英文 字母 
不 使 用 项 目 符号 
传统 的 亚美尼亚 数字 
传统 的 乔治 数字 
传统 的 希 伯 来 数字 
日 文平 假名 序号 
日 文 片 假 名 序号 
大 写 拉丁 字母 


| 使 用 CSS3 的 list-style-position 属性 可 以 定义 项 目 符号 的 显示 位 置 。 该 属性 取 值 包括 outside 和 
| inside, 其 中 outside 表示 把 项 目 符号 显示 在 列表 项 的 文本 行 以 外 , 列表 符号 默认 显示 为 outside，inside 


| 表示 把 项 目 符号 显示 在 列表 项 文本 行 以 内 。 
| 4 注意 : 如 果 要 清除 列表 项 目的 缩 进 显示 样式 ， 可 以 使 用 下 面 样式 实现 : 


ul.ol{ 
| padding: 0: 
| margin: 0 
| 
| 





【示例 】 下 面 示例 定义 项 目 符号 显示 为 空心 贺 ， 并 位 于 列表 行内 部 显示 ， 如 图 12.7 所 示 。 
<style type="text/css"> 
| body {/* 清除 页 边 距 */ 
| margin: 0: 
| padding: 0: 
I 











证 清除 边界 */ 
上 清除 补 白 */ 


} 

由 {/* 列表 基本 样式 */ 
list-style-type: circle: 
list-style-position: inside: 


让 空心 圆 符号 */ 
上 # 显示 在 里 面 */ 


</style> 
<uP> 
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<li><a hre 伍 "#"> 关 于 我 们 </a></li> 

<li><a hre 人 ="#"> 版 权 信息 </a></li> 

<li><a hre 仁 "#"> 友 情 链 接 </a></li> 
<hl> 








图 12.7 定义 列表 项 目 符号 


你 提示 : 在 定义 列表 项 目 符号 样式 时 ， 应 注意 两 点 : 
第 一 ,不 同 浏览 器 对 于 项 目 符号 的 解析 效果 ,以 及 其 显示 位 置 咯 有 不 同 。 如 果 要 兼容 不 同 | | 
浏览 器 的 显示 效果 ， 应 关注 这 些 差异 。 | 
第 二 , 项 目 符号 显示 在 里 面 和 外 面 会 影响 项 目 符号 与 列表 文本 之 间 的 距离 ， 同时 影响 列表 | 
项 的 缩 进 效果 。 不 同 浏览 器 在 解析 时 会 存在 差异 。 | 


12.2.2 ”定义 项 目 符号 图 像 es 
使 用 CSS3 的 list-style-image 属性 可 以 自 定义 项 目 符号 。 该 属性 允许 指定 一 个 外 部 图 标 文件 ， 以 视频 讲解 
此 满足 个 性 化 设计 需求 。 用 法 如 下 所 示 : 
list-style-image:none | <url> 
默认 值 为 none。 


【示例 】 以 12.2.1 节 示例 为 基础 ， 重 新 设计 内 部 样式 表 ， 增 加 自 定义 项 目 符号 ， 设计 项 目 符号 为 | 
外 部 图 标 bullet_main_02.gif， 效 果 如 图 12.8 所 示 。 





<style type="text/css"> 

ul tl* 列表 基本 样式 */ 
list-style-type: circle: /# 空心 图 符号 */ 
list-style-position: inside: 上/# 显示 在 里 面 */ 


list-style-image: url(images/bullet_main 02.gi9: 。“/* 自 定义 列表 项 目 符号 */ 
} 
</style> 





| 
图 12.8” 自 定义 列表 项 目 符号 | 
| 


窟 提示: 当 同 时 定义 项 目 符号 类 型 和 自 定 义 项 目 符号 时 ， 自 定义 项 目 符号 将 覆盖 默认 的 符号 类 型 。 
但 是 如 果 list-style-type 属性 值 为 none 或 指定 外 部 的 图 标 文件 不 存在 ， 则 lstsglegpe 属 | 
性 值 有 效 。 
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可 
| 


12.2.3 ”模拟 项 目 符号 


| 使 用 CSS3 的 background 属性 也 可 以 模拟 列表 项 目 符号 ， 设 计 技 巧 如 下 : 
| 第 1 步 ， 使 用 list-style-type:none 隐藏 列表 的 默认 项 目 符号 。 
| 第 2 步 ， 使 用 background 属性 为 列表 项 目 定义 背景 图 像 ， 精 确定 位 其 显示 位 置 。 
第 3 步 ， 同 时 使 用 padding-lef 属性 为 列表 项 目 定义 左 侧 空白 ， 避 免 背景 图 被 项 目 文本 迹 盖 。 
| 【示例 】 在 下 面 这 个 示例 中 ， 先 清除 列表 的 默认 项 目 符号 ,然后 为 项 目 列表 定义 背景 图 像 ， 并 定 
| 位 到 左 侧 垂直 居中 的 位 置 ， 为 了 避免 列表 文本 覆盖 背景 图 像 ， 定 义 左 侧 补 白 为 一 个 字符 宽度 ， 这 样 就 
| 可 以 把 列表 信息 向 右 侧 缩 进 显示 ， 显 示 效 果 如 图 12.9 所 示 。 
| <style type="text/css"> 
| 忆 {/* 清除 列 默认 样式 */ 
| list-style-type: none: 
padding: 0; 
margin: 0; 
} 
| li {/* 定义 列表 项 目的 样式 */ 
| background-image: url(images/bullet_sarrow.gif); 。 /* 定义 背景 图 像 */ 
| 


background-position: left center: 族 精确 定位 背景 图 像 的 位 置 */ 
background-repeat: no-repeat: /* 禁止 背景 图 像 平 铺 显示 */ 
padding-left: 1em:; 上 # 为 背景 图 像 挤 出 空白 区 域 */ 
} 
</style> 


x 


CS wena + a0 





12.9 使 用 背景 图 模拟 项 目 符号 


12.3 案例 实战 


下 面 通过 多 个 案例 演示 如 何在 具体 页 面 中 设计 超 链接 和 列表 的 样式 。 
12.3.1 设计 图 形 按钮 链接 


| 超 链 接 可 以 显示 为 多 种 样式 , 如 动画 、 按 钮 、 图 像 、 特 效 等 ， 本 节 介 绍 如何 设 计 图 形 化 按钮 样式 。 
| 设计 方法 : 使 用 CSS 的 background-image 属性 实现 。 
【示例 1】 下 面 示例 通过 背景 图 像 蔡 换 超 链 接 文 本 ， 设 计 图 形 按钮 效果 ， 如 图 12.10 所 示 。 
<style type="text/css"> 
| aeg {/* 超 链接 样式 */ 
| background: transparent url(images/btn2.gif) no-repeat top left: /* 背景 图 像 */ 
| 
| 





display: block: 雍 块 状 显 示 ， 方 便 定义 宽度 和 高 度 */ 
width:74px: /# 宽度 ， 与 背景 图 像 同 宽 */ 
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height 25px: 庆 高 度 ， 与 背景 图 像 同 高 */ 

text-indent:-999px; 让 隐藏 超 链接 中 的 文本 */ | 
} | 
</style> | 





<a class="reg” href="#"> 注 册 </a> | 


在 上 面 代码 中 ， 使 用 background-repeat 防止 背景 图 重复 平 铺 ， 定 义 <a> 标 签 以 块 状 或 者 行内 块 状 
显示 ,以 方便 为 超 链接 定义 高 和 宽 : 在 定义 超 链接 的 显示 大 小 时 , 其 宽 和 高 最 好 与 青 景 图 像 保持 一 致 ，| 


也 可 以 使 用 padding 属性 撑 开 <a> 标 签 ， 以 代替 width 和 height 属性 声明 ; 使 用 text-indent 属性 隐藏 超 | 
链接 中 的 文本 。 


< 注意 : 如 果 超 链接 区 域 比 背景 图 大 ， 可 以 使 用 background-position 属性 定位 背景 图 像 在 起 链接 中 
显示 位 置 。 
【示例 2】 下 面 示例 为 超 链接 不 同 状态 定义 不 同 背景 图 像 ， 当 在 正常 状态 下 ， 超 链接 左 侧 显示 一 
个 箭头 式 的 背景 图 像 ， 当 鼠标 移 过 超 链接 时 ， 背 景 图 像 被 蔡 换 为 另 一 个 动态 GIF 图 像 ， 使 整个 超 链接 
动态 效果 立即 显示 出 来 ， 演 示 效 果 如 图 12.11 所 示 。 
<style type="text/css"> 
areg {/* 定义 超 链接 正常 样式 ， 定 位 左 侧 背 景 图 像 */ 
background: url("images/arrow2.gif") no-repeat left center: 
padding-left:14px:; 
} 
areg:hover {/* 定义 鼠标 经 过 时 超 链 接 样式 : 定位 左 侧 背 景 图像 */ 
background: url("images/arrow1.gif") no-repeat left center; 
padding-left:14px: 
} 
</style> 
<a class="reg” href="#"> 注 册 </a> 


| 

ES htpv//ocalhosiest! - BO 7 ; | 
| 

| 





图 12.10 图 形 化 按钮 样式 图 12.11 动态 背景 样式 过于 你 


在 上 面 代码 中 ， 通 过 padding-left 属性 定义 超 链 接 左 侧 空 阶 ， 这 样 就 可 以 使 定义 的 背景 图 显示 出 
来 ， 避 免 被 链接 文本 中 盖 。 实 战 中 ， 经 常 需要 使 用 padding 属性 来 为 超 链接 增加 空余 的 空间 ， 以 便 背 | 
景 图 像 能 够 很 好 地 显示 出 来 。 


12.3.2 ”设计 背景 滑动 样式 


使 用 CSS 滑动 门 技术 可 以 设计 宽度 可 伸缩 的 超 链接 样式 。 所 谓 滑动 门 ， 就 是 通过 两 个 背景 图 像 。 视频 讲解 
的 看 加 ， 以 创造 一 些 可 自由 伸缩 的 背景 效果 。 | 

【操作 步骤 】 | 

第 1 步 ， 使 用 Photoshop 设计 好 按钮 图 形 的 效果 图 ， 然 后 分 切 为 两 截 ， 其 中 一 截 应 尽 可 能 地 窄 ， 只 
包括 一 条 椭圆 边 ， 另 一 截 可 以 尽 可 能 大 ， 这 样 设计 的 图 按钮 就 可 以 容纳 更 多 的 字符 ， 如 图 12.12 所 示 。 





| 
| 
| 
\ 
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图 12.12 绘制 并 裁 切 滑动 门 背景 图 


全 内 | 第 2 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 输入 以 下 代码 。 构 建 
” ”| 一 个 可 以 定义 重 对 背景 图 的 超 链 接 结构 ， 具 体 结构 如 下 ， 在 每 个 超 链 接 <a> 标 签 中 包含 了 一 个 <span> 
EX 辅助 标签 。 
| 全 TY><span> 按 钮 <span></a> 
| <a ”href="#"><span> 超 链接 </span></a> 
<a ”hre 伍 "#"><span> 图 像 按钮 </span></a> 
<a 
<a 





| href="#"><span> 扩 展 性 按钮 </span></a> 
| hre 合 "#"><span> 能 够 定义 很 多 字数 的 文本 链接 </span></a> 
| 第 3 步 ， 在 <head> 标 签 内 添加 <style type="textiess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
| 样式 。 使 用 CSS 把 短 的 背景 图 〈leftl.gif) 固定 在 <a> 标 签 的 左 侧 。 
”a {/* 定义 超 链接 样式 */ 
background: url(images/left1.gif) no-repeat top left: /* 把 短 截 背 景 图 像 固定 在 左 侧 */ 





| 
| display: block: 居 以 块 状 显 示 ， 这 样 能 够 定义 大 小 */ 
| float:left: 证 浮动 显示 ， 这 样 a 元 素 能 够 自动 收缩 宽度 ， 以 正好 包容 文本 */ 
padding-left: 8px: 必 增加 左 侧 内 边 距 ， 该 宽度 正好 与 上 面 定义 的 背景 图 像 同 宽 */ 
font: bold 13px Arial; 证 超 链接 文本 字体 属性 */ 
line-height: 22px: 上 # 定义 行 高 */ 
| height 30px: 愉 定义 按钮 高 度 */ 
| color: white; 庆 字体 颜色 */ 
| margin-left:6px; 让 左 侧 外 边框 */ 
| text-decoration:none: 必 清除 默认 的 下 划 线 样式 */ 
| } 
| 第 4 步 ， 把 长 的 背景 图 (rightl.gif) 固定 在 <span> 标 签 的 右 侧 。 
aspan{ 
| background: url(images/rightl.gif) no-repeat top right; 。 /* 定义 长 截 背景 图 像 */ 
display: block: 上 # 块 状 显示 */ 
padding: 4px 10px 4px 2px: 启 增加 内 边 距 */ 
} 


第 5 步 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 12.13 所 示 。 如 果 希 望 在 鼠标 经 过 时 让 背景 图 像 的 色彩 
| 稍稍 有 点 变化 ， 以 增加 按钮 的 动态 感 ， 不 妨 在 鼠标 经 过 时 增加 一 个 下 划 线 效果 。 
| ahover { text-decoration: Underline:} 





示例 效果 图 12.13 设计 滑动 门 链接 效果 
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12.3.3 设计 背景 交换 样式 
| Bb 


本 例 设计 两 幅 大 小 相同 、 效 果 不 同 的 背景 图 像 ， 然 后 使 用 CSS 进行 轮换 显示 ， 设 计 一 种 简单 的 | 视频 讲解 
鼠标 动画 效果 。 f 





【操作 步骤 】 | 
第 1 步 ， 使 用 Photoshop 设计 两 幅 大 小 相同 ， 但 效果 略 有 不 同 的 图 像 ， 如 图 12.14 所 示 。 

| | 

| 

begl.gif bg2.gif | 


图 12.14 设计 背景 图 像 


第 2 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testl.html， 在 <body> 标 签 内 输入 以 下 代码 构建 “| 
一 个 列表 结构 。 | 
| 


<u> 
<li><a hre 伍 "#"> 首 页 </a></li> 
<li><a hre 仁 "#"> 新 闻 </a></li> 
<li><a hre 伍 "#"> 微 博 </a></li> 
<n> 


| 
| 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 
样式 。 | 
a {/* 超 链接 的 默认 样式 */ 


| 
| 
text-decoration:none: 让 清除 默认 的 下 划 线 */ | 
display:inline-block: 此 行内 块 状 显示 所 | 
padding:2px lem; 上 # 为 文本 添加 补 白 效果 */ 
height:28px: /# 固定 高 度 */ 
line-height:32px: 此 行 高 等 于 高 度 ， 设 计 垂直 居中 */ 
text-align:center: 上 # 文本 水 平 居中 所 | 
background:url(images/b1.gif) no-repeat center: /#* 定义 背景 图 像 1， 禁 止 平 铺 ， 居 中 */ | 
color:#ccc: 证 浅 灰 色 字体 */ | 


a {l* 鼠标 经 过 时 样式 */ 

background:url(images/b2.gif) no-repeat center: /# 定义 背景 图 像 2， 禁 止 平 铺 ， 居 中 */ 
color-#ff: 日 色 字体 | 
} | 
| 
在 上 面 样式 代码 中 , 先 定义 超 链接 以 行内 块 状 显示 , 这 
样 便 于 控制 它 的 宽 和 高 , 然后 根据 背景 图 像 大 小 定义 a 元 素 
的 大 小 ， 并 分 别 为 默认 状态 和 鼠标 经 过 状态 定义 背景 图 像 。 
对 于 背景 图 来 说 , 超 链 接 的 宽度 可 以 不 必 等 于 背景 图 的 
宽度 , 只 要 小 于 背景 图 的 宽度 即 可 , 但 是 高 度 必须 保持 与 背 

景 图 像 的 高 度 一 致 。 在 设计 中 可 以 结合 背景 图 像 的 效果 定义 | 
字体 颜色 。 图 12.15 背景 图 交换 链接 效果 示例 效果 





第 4 步 ,在 浏览 器 中 预览 , 所 得 的 超 链 接 效果 如 图 12.15 
所 示 。 
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& ae 从 入 门 到 精通 ( 微 课 精 编 版 ) 
容 提示 : 为 了 减少 两 幅 背景 图 的 HTTP 请 求 次 数 ,避免 占用 不 必要 的 带宽 ， 可 以 把 图 像 交换 的 两 幅 
图 像 合并 为 一 幅 图 像 ， 然 后 利用 CSS 定位 技术 控制 背景 图 的 显示 区 域 。 


12.3.4 设计 水 平滑 动 菜单 


CSS 滑动 门 的 形式 有 两 种 : 水 平滑 动 和 垂直 滑动 。12.3.3 节 简单 演示 了 图 像 滑动 的 基本 方法 ， 本 
节 在 此 基础 上 介绍 更 复杂 的 案例 。 

| 【操作 步 又】 

| 第 1 步 ， 设 计 “ 门 "这 个 门 实际 上 就 是 背景 图 ， 滑 动 门 一 般 至 少 需要 2 幅 背 景 图 ， 以 实现 闭合 
| 成 门 的 设计 效果 ， 本 例 则 完全 采用 1 幅 背 景 图 像 ， 一 样 能 够 设计 出 滑动 门 效果 ， 如 图 12.16 所 示 。 考 
| 虑 到 门 能 够 适应 不 同 尺寸 的 菜单 ， 所 以 背景 图 像 的 宽度 和 高 度 应 该 尽量 大 , 这 样 就 可 以 保证 比较 大 的 


图 12.16 设计 滑动 门 背 景 图 


第 2 步 ， 设 计 “ 门 轴 ”。 至 少 需要 2 个 元 素 配合 使 用 才能 使 门 自由 推拉 。 背 景 图 需要 安装 在 对 应 
的 门 轴 之 上 才能 够 自由 推拉 ， 从 而 产生 滑动 效果 。 一 般 在 列表 结构 中 ， 可 以 利用 <li> 和 <a> 标 签 配合 
使 用 。 
第 3 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 编写 如 下 列表 结构 ， 
由 于 每 个 菜单 项 字数 不 尽 相同 ， 使 用 滑动 门 来 设计 效果 会 更 好 。 
<ulid="menu"> 
<li><a hre 仁 "#" tile=""> 首 页 </a></li> 
<li><a hre 仁 "#" tile=""> 微 博 圈 </a></li> 
<li><a hre 伍 "#" title=""> 移 动 开发 </a></li> 
| <li><a hre 伍 "#" title=""> 编 程 与 设计 </a></li> 
| <li><a hre 伍 "#" title=""> 程 序 员 与 语言 <a></li> 
| <li><a hre 伍 "#" title=""> 编 程 语言 排行 榜 </a></li> 





| 
第 4 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 准备 编写 
| 样式 。 


| 

| 第 5 步 ， 设 计 思 路 : 

在 下 面 辣 放 的 标签 (<li>) 中 定义 如 图 12.16 所 示 的 背景 图 ， 并 定位 左 对 齐 , 使 其 左 侧 与 <li> 
标签 左 侧 对 齐 。 

在 上 面 合 放 的 标签 (<a>) 中 设置 相同 的 背景 图 ,使 其 右 侧 与 <a> 标 签 的 右 侧 对 齐 ， 这 样 两 个 
背景 图 像 就 可 以 重 共 在 一 起 。 

| 第 6 步 , 为 了 避免 上 下 重 且 元 素 的 背景 图 相互 挤 压 ， 导 致 菜单 项 两 端的 圆 角 背景 图 被 覆盖 ， 可 以 

| 为 <li> 标 签 左 侧 和 <a> 标 签 右 侧 增加 补 白 (padding)， 以 此 限制 两 个 元 素 不 能 覆盖 两 端 圆 角 头 背景 图 。 

| 第 7 步 ， 根 据 上 两 步 的 设计 思路 ,动手 编写 如 下 CSS 样式 代码 : 


#menu {/* 定义 列表 样式 */ 


| 
| background: url(images/bg1.gif) YE 上 # 定义 导航 菜单 的 背景 图 像 */ 
| padding-left: 32px: 让 定义 左 侧 的 补 白 */ 

margin: Opx: 庆 清除 边界 */ 
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list-style-type: none: 上 # 清除 项 目 符号 */ | 
height:35px; 上 庆 固定 高 度 ， 否 则 会 自动 收缩 为 0*/ | 

} | 

fmenu li {/* 定义 列表 项 样式 */ | 
float: left: 庆 向 左 浮动 */ | 全 
margin:0 4px: 上 # 增加 菜单 项 之 间 的 距离 */ | ~ 
padding-left18px: 语 定义 左 补 白 ， 避 免 堪 侧 圆 角 覆盖 */ 
background:url(images/menu4.gif) left center repeat-x; 。 /#* 定义 背景 图 ， 左 对 齐 */ | 

} | 

#menu lia {/* 定义 超 链接 默认 样式 */ | 
padding-right: 18px: 庆 定义 右 补 白 ， 与 左 侧 形成 对 称 */ | 
float: left; 上 # 向 左 浮动 */ 
height 35px; 上 # 固定 高 度 */ 
color: #bbb; 上 # 定义 百分比 宽度 ， 实 现 与 二 同 宽 */ | 
line-height: 3Spx: 上 # 定义 行 高 ， 间 接 实 现 垂直 对 齐 */ | 
text-align: center; 上 # 定义 文本 水 平 居中 */ | 
text-decoration: none; 片 清除 下 划 线 效果 */ 
background:url(images/menu4.gif) right center repeat-x: 。” /* 定义 背景 图 像 */ 

} 

jnenu liaihover {/* 定义 鼠标 经 过 超 链接 的 样式 */ 
text-decoration:underline: 启 定义 下 划 线 */ | 
color: #fIF /* 白色 字体 */ | 


第 8 步 ， 保 存 页 面 之 后 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.17 所 示 。 
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12.17 水 平滑 动 菜单 | 
12.3.5 ”设计 垂直 滑动 菜单 EF 


| ly, 
12.3.3 节 介绍 了 背景 图 像 的 垂直 交换 样式 ， 但 是 单纯 的 垂直 滑动 存在 一 个 缺点 ， 如 果菜 单项 字数 | 轴 二 中 
不 同 (菜单 项 宽度 不 同 )， 那 么 就 需要 考虑 为 不 同 宽度 的 菜单 项 设计 背景 图 ， 这 样 就 比较 麻烦 。 解 决 | 
方法 : 将 水 平和 垂直 滑动 融合 在 一 起 ， 设 计 菜单 项 能 自由 适应 高 度 和 宽度 的 变化 。 














【操作 步骤 】 | 

第 1 步 , 设计 背景 图 , 如 图 12.18 所 示 。 然后 将 两 幅 背 景 图 拼合 在 一 起 , 形成 滑动 的 门 , 如 图 12.19 | 

所 示 。 | 
EE 

1 

图 12.18 设计 滑动 背景 图 图 12.19 拼合 滑动 背景 图 | 
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< 
| 第 2 步 ， 完 善 HTML 结构 ， 在 超 链接 (<a>) 内 再 包 训 一 层 标签 (<span>)。 启 动 Dreamweaver， 
新建 网 页 ， 保 存 为 testhtml， 在 <body> 标 签 内 编写 如 下 列表 结构 。 


| > 清 动 门 <hl> 
食 凡 | <ulid="menu"> 
we | <li><a hre 伍 "#" title=""><span> 首 页 </span></a></li> 
<li><a hre 仁 "#" title=""><span> 微 博 圈 </span></a></li> 
<li><a hre 伍 "#" title=""><span> 移 动 开发 </span></a></li> 


| <li><a hre 全 "#" title=""><span> 编 程 与 设计 </span></a></li> 
<li><a hre 仁 "#" title=""><span> 程 序 员 与 语言 </span></a></li> 
<li><a hre 仁 "#" title=""><span> 编 程 语言 排行 榜 </span></a></li> 
</ul> 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 准 备 编写 样式 。 
| 第 4 步 ， 设 计 CSS 样式 代码 ， 可 根据 上 节 示 例 样 式 代码 把 <li> 标 签 的 背景 样式 转 给 <span> 标 签 ， 
| 详细 代码 如 下 : 
##menu {/* 定义 列表 样式 */ 


| background: url(images/bg1.gif) #fF: 证 定义 导航 菜单 的 背景 图 像 */ 
| padding-left: 32px: 上 # 定义 左 侧 的 补 白 */ 

| margin: Opx: 让 清除 边界 */ 

| list-style-type: none: 上 # 清除 项 目 符号 */ 


height:35pX: 证 固定 高 度 ， 否 则 会 自动 收缩 为 0 */ 
} 
| #menu li {/* 定义 列表 项 样式 */ 
| float: left: /#* 向 左 浮动 */ 
| margin:0 4px: 人 增加 菜单 项 之 间 的 距离 */ 
} 
| #menu span {/* 定义 超 链接 内 包含 元 素 span 的 样式 */ 
| float:left: /# 向 左 浮动 */ 
| padding-left:18px: 证 定义 左 补 白 ,避免 左 侧 被 覆盖 */ 
| background:url(images/menu4.gif) left center repeat-x; 。“/* 定义 背景 图 ， 并 左 对 齐 */ 
} 
#menu lia {/* 定义 超 链 接 默 认 样 式 */ 
padding-right: 18px: 证 定义 右 补 白 ， 与 左 侧 形成 对 称 */ 
| float: left: 必 向 左 浮动 */ 
| height: 35px: 上 # 固定 高 度 */ 
| color: #bbb: 上 # 定义 百分比 宽度 ， 实 现 与 芋 同 宽 */ 
line-height: 35px: 证 定义 行 高 ， 间 接 实 现 垂直 对 齐 */ 
text-align: center: 尾 定义 文本 水 平 居中 */ 


text-decoration: none: 上 # 清除 下 划 线 效果 */ 
background:url(images/menu4.gif) right center repeat-x: ” /* 定义 背景 图 像 */ 


下 
| } 
| #menu li a:hover {/* 定义 鼠标 经 过 超 链接 的 样式 */ 
text-decoration:underline: 上 族 定义 下 划 线 所 
color: #HEE 上 访 白色 字体 *#/ 
} 


| 
第 5 步 ， 上 一 步 样式 代码 仅 完成 了 水 平滑 动 效果 ， 下 面 需 修改 部 分 样式 ,设计 当 鼠 标 经 过 时 的 滑 
| 动 效果 ， 把 如 下 样式 : 
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#menu li a:hover {/* 定义 鼠标 经 过 超 链 接 的 样式 */ 
text-decoration:underline: 庆 定义 下 划 线 */ 
color: #HTEF 谍 白色 字体 */ 

} 


修改 为 如 下 样式 : 


#menu a:hover {/* 定义 鼠标 经 过 超 链接 的 样式 */ 
color #TEF A* 白色 字体 */ | 
background:url(images/menu5.gif) right center repeat-x: ” /* 定义 滑动 后 的 背景 图 像 */ | 





} 

#menu a:hover span {/* 定义 鼠标 经 过 超 链接 的 样式 */ 
background:url(images/menu5.gif) left center repeat-x: 。“/* 定义 滑动 后 的 背景 图 像 */ 
cursor:pointer: 履 定义 鼠标 经 过 时 显示 手 形 指针 */ 
cursor:hand: 片 早期 正版 本 下 显示 为 手 形 指针 */ 


第 6 步 ， 保 存 页 面 之 后 在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.20 所 示 。 





回 
3 
回 

示 


图 12.20 ”水 平 与 垂直 滑动 菜单 人 


容 提示 : 如 果 使 用 CSS3 动画 技术 ， 添 加 如 下 两 个 样式 ， 可 以 更 运 下 地 演示 要 直 清 动 的 动画 效 末 


(test3.html )， 相 关 技术 的 详细 讲解 可 以 参考 后 面 章节 内 容 。 
#menu span { transition: all .3s ease-in:} 
#menu li a { transition: all .3s ease-in:} 


12.3.6 设计 Tab 选项 面板 


Tab 在 栏目 面板 中 比较 常用 ， 因 为 它 能 够 在 有 限 的 空间 内 包含 更 多 分 类 信息 ， 适 合 商业 网 站 的 版 呈 二 
面 集成 设计 。 
设计 思路 : 利用 CSS 隐藏 或 显示 栏目 的 部 分 内 容 ， 实 际 Tab 面板 所 包含 的 全 部 内 容 都 已 经 下 载 | 
到 客户 端 浏览 器 中 。 一 般 Tab 面板 仅 显示 一 个 Tab 菜单 项 ， 当 用 户 点 选 对 应 的 菜单 项 之 后 才 会 显示 对 | 
应 的 内 容 。 | 
【操作 步骤 】 | 
第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 过 | | 
HTML 文档 。 








<div id="tab"> 
<div class="Menubox"> 
< 
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| <liid="tab_1" class="hover" onclick="setTab(1.4)"> 明 星 </li> 
| <liid="tab_2" onclick="setTab(2.4)"> 搞 笑 </li> 
| <liid="tab_3" onclick="setTab(3.4)"> 美 女 </li> 
<liid="tab_4" onclick="setTab(4.4)"> 摄 影 </li> 


会 内 | 本 


| </div> 
Note <div class="Contentbox"> 
| <div id="con 1" class="hover" ><img src="images/1.png" /></div> 


| <div id="con_ 2" class="hide"><img src="images/2.png" /></div> 
| <div id="con 3" class= "hide"><img src= ”images/3.png" /></div> 

<div id="con 4" class="hide"><img src="images/4.png" /></div> 
</div> 


| 在 Tab 面板 中 ，<div class="Menubox"> 框 包含 的 内 容 是 菜单 栏 ，<div class="Contentbox"> 框 包含 
| 的 是 面板 内 容 。 
| 第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 准 备 编写 样式 。 
| 第 3 步 ， 定 义 Tab 菜单 的 CSS 样式 。 这 里 包含 3 部 分 CSS 代码 : 第 一 部 分 重 置 列表 框 、 列 表 项 
| 和 超 链 接 默认 样式 , 第 二 部 分 定义 Tab 选项 卡 基本 结构 , 第 三 部 分 定义 与 Tab 菜单 相关 的 几 个 类 样式 。 
| 详细 代码 如 下 : 
店 页 面 元 素 的 默认 样式 */ 
a {/* 超 链接 的 默认 样式 */ 

color:#00F: 诈 定义 超 链接 的 默认 颜色 */ 

text-decoration:none: 证 清除 超 链 接 的 下 划 线 样式 */ 


} 
a:hover { color: #c00; }/* 鼠标 经 过 超 链接 的 默认 样式 */ 
ul {/* 定义 列表 结构 基本 样式 */ 


| list-style:none; /# 清除 默认 的 项 目 符号 */ 

| padding:0: 证 清除 补 白 */ 

| margin:Opx: /# 清除 边界 */ 

| text-align:center: /# 定义 包含 文本 居中 显示 */ 

| } 

| 请 选项 卡 结构 */ 

| #tab {/* 定义 选项 卡 的 包含 框 样式 */ 

| width:920px: /# 定义 Tab 面板 的 宽度 */ 

| margin:0 auto: 和 # 定义 Tab 面板 居中 显示 */ 
font-size:12px: 上 # 定义 Tab 面板 的 字体 大 小 */ 
overflow:hidden: 证 隐藏 超出 区 域 的 内 容 */ 


} 
上 # 菜单 样式 类 */ 
.Menubox {/* Tab 菜单 栏 的 类 样式 */ 


width:100%; 上 # 定义 宽度 */ 
backeground:url(images/tab1 .gif): 庆 定义 Tab 菜单 栏 的 背景 图 像 */ 
height:28px: 上 # 固定 高 度 */ 

| line-height:28px: 上 # 定义 行 高 ， 实 现 垂直 居中 显示 */ 

me 

| Menubox ul fmargin:0px: padding:Opx: } 庆 清除 列表 缩 进 样式 */ 


-Menubox li {/* Tab 菜单 栏 包含 的 列表 项 基本 样式 */ 
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3 


float:left: 庆 向 左 浮动 ， 实 现 并 列 显示 */ 
display:block: 上 # 块 状 显示 村 
cursor:pointer; 上 # 定义 手 形 指针 样式 */ 
width:114px: 上 # 固定 宽度 */ 
text-align:center: 启 定义 文本 居中 显示 */ 
color:#949694: # 字体 颜色 */ 
font-weight:bold; 刻 加 粗 字 体 */ 

} 

.Menubox li img{ width:100%:} 

-Menubox lihover {/* 鼠标 经 过 列表 项 的 样式 类 */ 
padding:Opx: /# 清除 补 白 */ 
background:#ffF /# 加 亮 背景 色 */ 
width:116px: 让 固定 宽度 显示 */ 
border: 1px solid #A8C29F: 上 庆 定义 边框 线 */ 
border-bottom:none: 话 清除 底 边框 线 样式 */ 
background:url(images/tab2.gif): 六 定义 背景 图 像 */ 
color:#739242: /# 定义 字体 颜色 */ 
height:27px; /# 固定 高 度 */ 
line-height:27px; 上 # 定义 行 高 ， 实 现 文本 垂直 居中 */ 

} 

.Contentbox {/* 定义 Tab 面板 中 内 容 包含 框 基本 样式 类 */ 
clear:both: 证 清除 左右 浮动 元 素 */ 
margin-top:Opx; 让 清除 项 边界 */ 
border: 1px solid #A8C29F: 上 # 定义 边框 线 样式 */ 
border-top:none; 上 # 清除 项 部 边框 线 样式 */ 
padding-top:8px: 上 # 定义 顶部 补 白 ， 增 加 距离 */ 

} 

.hide {display:none: /* 隐藏 元 素 显示 */} /# 隐藏 样式 类 */ 


第 4 步 ， 使 用 JavaScript 设计 Tab 交互 效果 。 





下 面 函 数 定义 了 两 个 参数 ， 第 一 个 参数 定义 了 要 隐藏 或 显示 的 面板 ， 第 二 个 参数 定义 了 当前 Tab | 


面板 包含 了 几 个 Tab 选项 卡 。 该 函数 还 定义 了 当前 选项 卡 包含 的 列表 项 的 类 样式 为 hover， 最 后 为 每 | 
个 Tab 菜单 中 的 五 元 素 调用 该 函数 即 可 ， 从 而 实现 单 击 对 应 的 菜单 项 ， 即 可 自动 激活 该 脚本 函数 ， 并 
把 当前 列表 项 的 类 样式 设置 为 hover， 同 时 显示 该 菜单 对 应 的 面板 内 容 ， 而 隐藏 其 他 面板 内 容 。 有 | 
JavaScript 语言 的 详细 讲解 可 以 参考 后 面 章节 内 容 。 
<script> 
function setTab(curseln){ 
for(i=1:i<=n:iH+){ 
Var menu=document.getElementById("tab_"+i): 
Var con=document.getElementById("con "+DD: 
menu.className=i—cursel?"hover":"": 
con.style.display=i=—=cursel?"block":"none": 
b 
} 
</script> 
第 5 步 ， 保 存 页 面 之 后 在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.21 所 示 。 
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回 | 
视频 讲解 | 下 拉 式 面板 比较 特殊 ， 当 鼠标 移 到 菜单 项 目 上 时 将 自动 弹出 一 个 下 拉 的 大 面板 , 在 该 面板 中 显示 
| 各 种 分 类 信息 。 这 种 版 式 在 电 商 类 型 网 站 中 应 用 比较 多 。 
设计 思路 : 在 超 链接 〈<a> 标 签 》 内 包含 面板 结构 ， 当 鼠标 移 过 超 链接 时 ， 自 动 显示 这 个 面板 ， 
| 而 在 默认 状态 隐藏 其 显示 。 由 于 早期 正 浏览 器 对 <a> 标 签 包含 其 他 结构 的 解析 存在 问题 , 设计 时 应 适 
当 考虑 这 个 兼容 问题 。 
【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 编写 如 下 结构 ， 构 建 
| HTML 文档 。 
uid"ists"> 
<li><a hre 人 ="#" class="tl"> 商 品 导购 
<1--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<div class="pos1"> 
<dlid="menu"> 
<dt> 产 品 大 类 </dt> 
| <dd><a href="#" title="> 图 书 、 音 像 、 数 字 商 品 </a></dd> 
| <dd><a hre 人 ="#" title=""> 家 用 电器 </a></dd> 
| <dd><a hre 仁 "#" title=""> 手 机 、 数 码 、 京 东 通信 预约 </a></dd> 
<dd><a hre 人 ="#" title="> 电 脑 、 办 公 </a></dd> 
<dd><ahre 人 "title=""> 家 居 、 家 具 、 家 装 、 厨 具 </a></dd> 
<dd><a hre 伟 "##" title= "> 服饰 内 衣 、 珠 宝 首 饰 </a></dd> 
| <dd><ahre 人 "title=""> 个 护 化 妆 </a></dd> 
| <dd><a hre 伟 "##' title=""> 鞋 靳 、 箱 包 、 钟 表 、 奢 侈 品 </a></dd> 
| <dd><a hre 人 f="#" title=""> 运 动 户外 </a></dd> 





</d> 
</div> 
<!--[iflte IE 6></td></tr></table></a><![endif]--> 
</> 
< 
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次 提示 : 在 起 链接 中 包含 一 个 面板 结构 ， 为 了 让 超 链接 在 正 浏览 器 中 能 够 正常 响应 ， 代 码 中 使 用 
下 条 件 语句 (后面 章节 会 详细 讲解 )。 下 条 件 语句 是 一 个 条 件 结构 ， 用 来 判断 当前 正 浏 
览 器 的 版 本 号 ， 以 便 执行 不 同 的 CSS 样式 或 解析 不 同 的 HIML 结构 。 | 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 准 备 编写 样式 。 

第 3 步 ， 编 写 下 拉 式 导航 面板 的 CSS 样式 如 下 : 
Hists {/* 定义 总 包含 框 基本 结构 */ | 





background: url(images/bg1.gif) #ff: 上 # 背景 图 像 */ | 
padding-left: 32px: 启 左 侧 补 白 */ | 
margin: Opx: /# 清除 边界 */ | 
height:35px: 证 固定 高 度 */ | 
font-size:12px: /# 字体 大 小 */ | 
} | 
和 ists i {/* 定义 列表 项 目 基本 样式 */ | 
display:inline; 让 行内 显示 */ | 
float:left: /# 向 左 浮动 */ | 
height:35px: 族 固定 高 度 */ | 
background:url(images/menu5.gif) no-repeat left center;: ” /* 背景 图 像 */ | 
padding-left:12px: 店 左 侧 补 白 */ | 


position:relative; /* 相对 定位 ， 为 下 拉 导 航 面 板 绝对 定位 指定 一 个 参考 框 */ 


} 
ists li a.tl {/* 定义 超 链接 基本 样式 */ 


1 
display:block: 证 块 状 显示 */ | 
width:80px: /# 固定 宽度 */ | 
height:35px: * 固定 高 度 */ | 
text-decoration:none: 上 清除 下 划 线 */ 
text-align:center: 局 文本 水 平 居中 所 
line-height:35px: 证 行 高 ， 实 现 垂直 居中 */ | 
font-weight:bold: /# 加 粗 显示 */ | 
color:#fff: 让 白色 字体 颜色 */ | 
background:url(images/menu5.gif) no-repeat right center: /* 定义 导航 背景 图 像 */ 
padding-right:12px: 证 定义 右 侧 补 白 大 小 */ 


} 
Hists div {display:none; }/* 定义 超 链接 包含 的 导航 面板 的 隐藏 显示 */ | 
Hists :hover div {/* 显示 并 定义 超 链接 包含 的 导航 面板 */ | 


display:block: 让 块 状 显示 */ 

width:598px: /# 固定 宽度 */ 

background:#faebd7: 上 * 定义 背景 色 */ 

position:absolute: 谍 绝对 定位 ， 以 便 自由 显示 */ | 
left:1px: /#* 距离 包含 框 左 侧 (li 元素) 的 距离 */ | 
top:34px: /* 距离 包含 框 顶部 的 距离 */ | 
border: 1px solid #888: 让 定义 边框 线 */ 

padding-bottom:10px: 刻 顶部 底部 补 白 */ 


} 
第 4 步 ， 保 存 页 面 之 后 在 浏览 器 中 预览 ， 演 示 效 果 如 图 12.22 所 示 。 
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图 12.22 ”下拉 式 导航 面板 
12.4 在 线 练 习 


本 节 提 供 了 两 个 在 线 练习 :1) 列表 样式 ; (2) 超 链 接 样式 。 感 兴趣 的 读者 可 以 扫 码 强化 基本 功 
训练 ， 通 过 大 量 案例 练习 HTML5 列表 和 超 链接 的 样式 设计 。 
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使 用 CSS3 美化 表格 和 表单 样式 


在 前 面 章节 中 ， 我 们 曾经 介绍 了 表格 和 表单 的 结构 ， 本 章 主 要 介绍 如 何 使 用 CSS 控制 表格 
和 表单 的 显示 效果 ， 如 表格 的 边框 和 和 背景， 表单 的 边框 和 背景 等 样式 ， 以 及 如 何 设 计 比 较 实用 
的 表格 和 表单 页 面 


【 学 习 要 点 】 

定义 表格 基本 样式 

能 够 根据 需要 设计 复杂 的 表格 样式 
定义 表格 基本 样式 

能 够 根据 页 面 风格 设计 表格 样式 。 


于 


吾 吾 芋 
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13.1 设计 表格 样式 


| Css 为 表格 定义 了 5 个 专用 属性 ， 详 细 说 明 如 表 13.1 所 示 。 
表 13.1 CSS 表格 属性 列表 


属 性 取 值 
separate( 边 分 开 ) | 
collapse ( 边 合并 ) 


说 了 明 
定义 表格 的 行 和 单元 格 的 边 是 合并 在 一 起 还 是 按照 标准 的 HTML 样 
式 分 开 
定义 当 表格 边框 独立 (如 当 border-collapse 属性 等 于 separate 时 ) 时 ， 
行 和 单元 格 的 边 在 横向 和 纵向 上 的 间距 ， 该 值 不 可 取 负 值 
定义 表格 的 caption 对 象 位 于 表格 的 顶部 或 底部 。 应 与 caption 元 素 一 
起 使 用 
定义 当 单元 格 无 内 容 时 ， 是 否 显示 该 单元 格 的 边框 
定义 表格 的 布局 算法 ， 可 以 通过 该 属性 改善 表格 呈现 性 能 ， 如 果 设 置 
fixed 属性 值 ， 会 使 正 浏览 器 以 一 次 一 行 的 方式 呈现 表格 内 容 ， 从 而 
提供 给 信息 用 户 更 快 的 速度 ; 如 果 设 置 auto 属性 值 ， 则 表格 在 每 一 单 
元 格 内 所 有 内 容 读 取 计算 之 后 才 会 显示 出 来 


除了 上 表 介绍 的 5 个 表格 专用 属性 外 ，CSS 其 他 属性 对 于 表格 一 样 适用 。 
| 13.1.1 定义 边框 样式 


使 用 CSS3 的 border 属性 可 以 定义 表格 边框 。 由 于 表格 中 每 个 单元 格 都 是 一 个 独立 的 对 象 ， 为 它 
| 们 定义 边框 线 时 ， 相 互 之 间 不 是 紧密 连接 在 一 起 的 。 
| 使 用 CSS3 的 border-collapse 属性 可 以 把 相 邻 单元 格 的 边框 合并 起 来 ， 相 当 于 把 相 邻 单元 格 连接 
| 为 一 个 整体 。 该 属性 取 值 包括 separate (单元 格 边框 相互 独立 ) 和 collapse (单元 格 边框 相互 合并 )。 
| 【示例 】 下 面 示例 在 <head> 标 签 内 添加 <style type="textless"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 
| 编写 如 下 样式 。 
“eA 边框 可 
| border-collapse: collapse: 

width: 100%:; 
2 td { border: solid 1px #ff0000:} /* 定义 单元 格 边框 线 为 1 像素 的 细 线 */ 


然后 借助 6.2.4 节 的 示例 表格 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 13.1 所 示 。 





border-collapse 





border-spacing | length 


caption-side top | bottom 


-Cells show | hide 


table-layout auto | fixed 




















body> 











E23 
在 表格 中 ， 上 本 于 可 运行 和 、 








图 13.1 使 用 CSS 定义 单元 格 边框 样式 
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13.1.2 ”定义 单元 格 间距 
使 用 CSS3 的 border-spacing 属性 可 以 定义 单元 格 间距 ， 取 值 包 含 1 个 或 2 个 值 。 当 定义 一 个 
时 ， 则 定义 单元 格 行 间距 和 列 间距 都 为 该 值 。 例 如 : 
table { border-spacing:20px:}/* 分 隔 单元 格 边框 */ 
如 果 分 别 定义 行 间距 和 列 间距 ， 就 需要 定义 两 个 值 ， 例 如 : 





table { border-spacing:10px 30px:}/* 分 隔 单元 格 边框 */ | 
其 中 ， 第 一 个 值 表 示 单 元 格 之 间 的 行 间距 ， 第 二 个 值 表示 单元 格 之 间 的 列 间距 ， 该 属性 值 不 可 以 | 
为 负数 。 使 用 cellspacing 属性 定义 单元 格 之 间 的 距离 之 后 ， 该 空间 由 表格 背景 填充 。 | 
| 
< 注意 : 使 用 CSS 的 cellspacing 属性 时 ， 应 确保 单元 格 之 间 相互 独立 ， 不 能 使 用 “border-collapse: | 
collapse;” 声 明 合并 表格 的 单元 格 边框 ， 也 不 能 使 用 CSS 的 margin 属性 来 代替 设计 ， “| 
格 之 间 不 能 使 用 margin 属性 调整 间距 。 
早期 正 浏览 器 不 支持 该 属性 ， 要 定义 相同 效果 的 样式 ， 和合 人 oblev 村 的 
cellspacing 属性 来 设置 。 
【示例 】CSS 的 padding 属性 与 HTML 的 cellpadding 属性 功能 相同 。 例 如 ， 下 面 样式 为 表格 单 
元 格 定义 上 、 下 6 像素 和 左 、 右 12 像素 的 补 白 空间 ， 效 果 如 图 13.2 所 示 。 


table {/* 合并 单元 格 边框 */ 
border-collapse: collapse; 
Width: 10096: 


} 
th,td{ 

border: solid 1px #ff0000: 
) padding: 6px 12px: 





标签 


<thead> 





<tbody> 








<tfoot> 


* 在 表格 中 ， 上 述 标签 属于 可 选 标签 

















图 13.2 增加 单元 格 空 阶 
13.1.3 ”定义 标题 位 置 
使 用 CSS3 的 caption-side 属性 可 以 定义 标题 的 显示 位 置 ， 该 属性 取 值 包括 top〈( 位 于 表格 上 面 )、 


bottom《〈 位 于 表格 底部 )。 如 果 要 水 平 对 齐 标题 文本 ， 则 可 以 使 用 text-align 属性 。 
【示例 】 以 13.1.2 节 示 例 为 基础 ， 在 下 面 示例 中 定义 标题 在 底部 显示 ， 效 果 如 图 13.3 所 示 。 


<style type="text/css"> 
table {/* 合并 单元 格 边框 */ 





| 
| 
| 
\ 
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} 
| th, td { border: solid 1px #ft0000: 
和 A | 上 
NA | caption-side: bottom:; 


margin-top: 10px; 
Note i 
| font-weight: bold: 
| color: #666: 
| 
</style> 


} 


证 底部 显示 */ 
上 # 定义 左右 边界 所 
让 定义 字体 大 小 */ 
让 加 粗 显 示 */ 
上 # 灰色 字体 */ 


el Er EC 司 世 区 





3 


] 











尾 又 表 天 络 构 。 
| 定义 表格 主体 结构 。 
和 的 页 革 结 条 





医 义 素 








FE 民 于 可 迁 标 签 、 








13.1.4 ”隐藏 空 单元 格 





效果 如 图 13.4 所 示 。 


结构 化 表格 标签 





图 13.3 ”增加 单元 格 空隙 


CE hc//ocalhosttestt -BC| Ose 


使 用 CSS3 的 empty-cells 属 性 可 以 设置 空 单元 格 是 否 显示 ,empty-cells 属 性 取 值 包括 show 和 hide。 
注意 ， 该 属性 只 有 在 表格 单元 格 的 边框 处 于 分 离 状态 时 有 效 。 
【示例 】 以 13.1.4 节 示 例 为 基础 ， 在 下 面 示例 中 隐藏 页 脚 区 域 的 空 单元 格 边 框 线 ， 隐藏 前 后 比较 


EECG EEC 





说 明 


标 和 


说 明 








匡 义 表 头 结构 。 


thead> 攻 . 





义 表格 主体 结构 。 





表 头 结构 、 
[etoody> [定义 素 格 主体 结构 





| 定义 表格 的 页 肢 结 构 。 




















[二 天 本 中 ， 上 上 谴 标 要 局 于 可 这 标 芝 。 





隐藏 前 


<style type="text/css"> 

table {/* 合并 单元 格 边框 */ 
width: 10094: 
empty-cells: hide: 





} 

th, td { border: solid 1px #ff0000: 

caption {/* 定义 标题 样式 */ 
caption-side: bottom: 
margin-top: 10px: 


结构 化 表格 标签 


} 


teor 





| 定义 表格 的 页 膨 结 构 。 











上 在 表格 中 ， 上 述 标签 属于 可 选 标签 。 
结构 化 表格 标签 


隐藏 后 


13.4 ”隐藏 空 单元 格 效果 


人 * 隐藏 空 单元 格 */ 


庆 底部 显示 */ 
必 定义 左右 边界 */ 
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font-size: 18px: /# 定义 字体 大 小 */ 
font-weight: bold: 让 加 粗 显示 */ 
color: #666: /# 灰色 字体 */ 

} 

</style> 


洋 提示 ， 如 果 单元 格 的 visibility 属性 为 hidden， 即 便 单元 格 包含 内 容 ， 也 认为 是 无 可 视 内 容 ， 即 室 ， 
单元 格 。 可 视 内 容 还 包括 “&nbsp:”， 以 及 其 他 空白 字符 。 


13.2 设计 表单 样式 





表单 没有 独立 的 CSS 属性 ， 适 用 CSS 通用 属性 ， 如 边框 、 背 景 、 字 体 等 样式 。 但 是 个 别 表单 控 
件 比 较 特 殊 ， 不 宜 使 用 CSS 定制 ， 如 下 拉 菜 单 、 单 选 按 钮 、 复 选 框 和 文件 域 。 如 果 完 全 设计 个 性 化 
样式 ， 有 时 还 需要 JavaScript 辅助 实现 。 

13.2.1 定义 文本 框 样式 

使 用 CSS 可 以 对 文本 框 进行 全 面 定制 ， 如 边框 、 背 景 、 补 白 、 大 小 、 字 体 样式 ， 以 及 CSS3 圆 角 、 | 
阴影 等 ， 本 节 将 通过 几 个 示例 演示 设计 文本 框 样式 的 基本 方法 。 | 

【示例 1】 启动 Dreamweaver， 新建 一 个 网 页 ， 保 存 为 testl html， 在 <body> 内 使 用 <form> 标 签 包 | 
含 一 个 文本 框 和 一 个 文本 区 域 。 | 


| 
| 
<form> | 
| 
| 





<p><label for="user"> 文 本 框 : </label> 
<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 
<p><label for="text"> 文 本 区 域 ，</label> 
<textarea ”id="text" name="text"> 看 我 背景 </textarea></p> 
</form> 


在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 ， 定 义 表 
单 样式 ， 为 文本 框 和 文本 区 域 设 置 不 同 的 边框 色 、 字 体 色 、 背 景 图 。 





body { font-size: 14px: } 上 # 文本 大 小 */ 

input { 
width: 300px: 上 # 设置 宽度 */ | 
height 25px: 诺 设置 高 度 */ | 
font-size: 14px: 雍 文本 大 小 时 | 
line-height: 25px: 庆 设置 行 高 */ | 
border: 1px solid #339999: 设置 边框 属性 */ | 
color: #FF0000: /# 字体 颜色 */ | 
background-color: #99CC66: /#* 背景 颜色 */ | 

} | 

textarea { | 
width: 400px: 设置 宽度 */ | 
height: 300px: 庆 设置 高 度 */ | 
line-height: 24px: 庆 设置 行 高 */ | 
border: none: 上 # 清除 默认 边框 设置 */ | 
border: 1px solid #fF7300; 证 设置 边框 属性 */ | 


“ls 
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background: #99CC99 url(images/1.jpg) no-repeat: /* 设置 宽度 */ 


I 
| dri ee 人 * 背景 颜色 */ 
| margin-left: 60px: 让 设置 外 间距 */ 
Fo } 
全 =， 在 上 面 代码 中 ,定义 整个 表单 中 字体 大 小 和 输入 域 的 空间 ， 设 置 宽度 和 高 度 ， 输 入 域 的 高 度 和 行 


色 中 一 般 反差 较 大 ， 突 出 文本 内 容 。 
| 设置 文本 区 域 属性 。 同 样 对 其 宽 高 进行 设置 ， 此 处 设置 
| 它 的 行 高 为 24 像素 , 实现 行 与 行 的 间距 , 而 不 设置 垂直 居中 。 
| 通过 浏览 器 我 们 发 现 文本 区 域 的 边框 线 有 凹凸 的 感觉 ， 此 时 
| 设置 边框 线 为 0， 并 重新 定义 边框 线 的 样式 。 文 本 区 域 前 的 
| 输入 内 容 较 多 ， 可 以 设置 块 元 素 换行 显示 使 文本 输入 全 部 显 
| 示 。 通 过 浏览 器 发 现 单 行文 本 框 和 文本 区 域 左边 并 没有 对 齐 ， 
| 通过 设置 margin-left 属性 来 实现 上 (单行 文本 框 》 下 (文本 
| 区域 的 对 齐 )， 最 后 更 改 文本 区 域 的 背景 色 和 背景 图 , 即 整个 
| 表单 样式 设置 完毕 。 
| 在 正 浏 览 器 中 预览 ， 演 示 效 果 如 图 13.5 所 示 。 
| 【示例 2】 使 用 CSS 设计 表单 对 象 样式 有 不 同 的 方法 。 
| 以 上 面 示例 为 例 ， 如 果 使 用 属性 选择 器 ， 则 可 以 使 用 如 下 样式 来 控制 。 
新 建 网 页 ， 保 存 为 test2.html， 在 <body> 内 使 用 <form> 标 签 包含 一 个 文本 框 和 一 个 密码 域 。 
<form> 
<p><label for="user"> 文 本 框 : </label> 
<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 
<p><label for="pass"> 密 码 域 ，</label> 
<input type="password" value=" 看 我 的 颜色 " id="pass" name="pass" /></p> 





图 13.5 文本 框 和 文本 区 域 样式 


</form> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 然 后 输入 下 面 样式 。 
body { font-size: 14px: 谍 文本 大 小 */ } 
input { 
width: 200px: /# 设置 宽度 */ 
height: 25px: 语 设置 高 度 */ 
border: 1px solid #339999: 上 # 设置 边框 所 
background-color: #99CC66: /# 设置 背景 色 */ 


} 
input[type=password'] { background-color: #F00: } 证 设置 背景 色 */ 
在 正 浏 览 器 中 预览 ， 演 示 效 果 如 图 13.6 所 示 。 
也 可 以 使 用 类 样式 控制 表单 样式 。 以 上 面 示例 为 基础 ， 
简单 定义 一 个 类 样式 ， 然 后 添加 到 表单 对 象 中 即 可 。 

<style type= "text/css"> 

|， inputnew{ background-color #00:} 

| </style> 

| <input type="password" value=" 看 我 的 颜色 " id="pass" 

| name= "pass" class="new" /> 


Jote | 高 应 一 致 ， 即 方便 实现 单行 文字 垂直 居中 ， 接 着 设置 单行 输入 框 的 边框 ， 在 字体 颜色 和 背景 颜色 的 取 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 





13.6 ”使 用 伪 类 样式 控制 表单 对 象 
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【示例 3】 大 部 分 表单 对 象 获得 焦点 时 会 高 亮 显 示 ， 提 示 用 户 当 前 焦点 的 位 置 ， 如 使 用 CSS 伪 | 
类 :focus 可 以 实现 输入 框 的 背景 色 的 改变 ; 使 用 CSS 伪 类 :hover 可 以 实现 当 鼠 标 滑 过 输入 框 时 ， 加 亮 | 
或 者 改变 输入 框 的 边框 线 ， 提 示 当 前 鼠标 滑 过 输入 框 。 
新 建 网 页 ， 保 存 为 test3.html， 在 <body> 内 使 用 <form> 标 签 包含 一 个 文本 框 和 一 个 密码 域 。 
<form> 
<p><label for="user"> 文 本 框 : </label> 
<input type="text" value=" 看 我 的 颜色 " id="user" name="user" /></p> 
<p><label for="pass"> 密 码 域 ，</label> | 
<input type="password" value=" 看 我 的 颜色 " id="pass" name="pass" class="new" /> | 





</form> 
在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 内 部 样式 表 ， 输 入 下 面 样式 。 | 
| 
body { font-size: 14px: 庆 设置 字体 大 小 */} | 
input { | 
width: 200px: 上 # 设置 宽度 */ 
height 25px: 上 # 设置 高 度 */ 
border: 1px solid #339999: 让 设置 边框 样式 */ | 
background-color: #99CC66; /设置 背景 颜色 */ | 
} | 
pspan { | 
display: inline-block: 雍 定义 行内 块 状 显示 */ 
width: 100px: * 设置 宽度 */ 
text-align: right; 庆 设置 右 对 齐 */ | 
} | 
input { | 
width: 200px: 让 设置 宽度 */ | 
height: 25px: 
border: 3px solid #339999; 店 设置 边框 样式 */ 
background-color: #99CC66; 片 设置 背景 颜色 */ 
} 
input:focus { background-color: #FF0000:; /# 设置 背景 颜色 */ } | 
input:hover { border: 3px dashed #99FF00; 上 诊 设置 边框 样式 */ } | 


在 正 浏览 器 中 预览 ， 演 示 效 果 如 图 13.7 所 示 。 





图 13.7 使 用 伪 类 设计 动态 样式 效果 


13.2.2 ”定义 单 选 按 钮 和 复 选 框 样式 


使 用 CSS 可 以 简单 设计 单 选 按钮 和 复 选 框 的 样式 ， 如 边框 和 背景 色 。 如 果 整 体 改变 其 风格 ， 需 | 视频 讲解 
要 通过 JavaScript 和 背景 图 昔 换 的 方式 来 间接 实现 。 下 面 以 单 选 按钮 为 例 进行 演示 说 明 ， 复 选 框 的 实 | 
现 可 以 参考 本 节 示 例 源 代码 。 \ 
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【设计 思路 】 
第 1 步 ， 先 根据 需要 设计 两 种 图 片 状 态 : 选中 、 未 选中 ， 后 期 通过 不 同 的 class 类 实现 背景 图 像 
| 的 改变 
会 内 | 第 2 步 ， 通 过 <label> 标 签 的 for 属性 和 单 选 按 钮 id 属性 值 实现 内 容 与 单 选 按钮 的 关联 ， 即 单 击 单 
人 一 | 选 按钮 相对 应 的 文字 时 ， 单 选 按钮 被 选中 。 
第 3 步 ， 借 助 JavaScript 脚本 实现 单 击 时 动态 改变 class 类 ， 实 现 背景 图 像 的 切换 。 
| 【操作 步骤 】 


| 第 1 步 ,在 Photoshop 中 设计 两 个 大 小 相等 的 背景 图 标 ,图 标 样式 如 图 13.8 
所 示 。 OO 
| 第 2 步 ， 新 建 网 页 ， 保 存 为 testl.html， 在 <body> 内 使 用 <form> 标 签 包含 ee ey 
多 个 单 选 按钮 .该 表单 设计 评选 各 个 浏览 器 被 认可 的 人 数 , 选项 有 火狐 浏览 器 、 图 138 设计 背景 图 标 
| 下 浏览 器、 谷歌 浏览 器 等 。 
| 
<form> 

<h3> 请 选择 您 最 喜欢 的 浏览 器 <1h3> 


> 
<input type="radio" checked="" id="radio0" value="radio" name="group"/> 
<label for="radio0" class="radiol">Internet Explorer</label> </p> 


<input type="radio" checked="" id="radio1" value="radio" name="group"/> 
<label for="radio1" class="radio1" >Maxthon</label></p> 
<input type="radio" checked="" id="radio2" value="radio" name="group"/> 
<label for="radio2" class="radio2" >Mozilla Firefox</label></p> 
<input type="radio" checked="" id="radio3" value="radio" name="group"/> 
<label for="radio3" class="radio1" > 谷歌 浏览 器 </label></p> 
<input type="radio" checked="checked" id="radio4" value="radio" name="group"/> 
<label for="radio4" class="radiol1" >Opera</label></p> 
<input type="radio" checked="" id="radio5" value="radio" name="group"/> 
<label for="radio5" class="radio1" > 世界 之 窗 </label></p> 
SN 
<input type="radio" checked="" id="radio6" value="radio" name="group"/> 

| <label for="radio6" class="radio1" > 搜狗 浏览 器 </label></p> 
| </form> 
第 3 步 ， 在 <head> 标 签 内 添加 <style type="textess"> 标 签 ， 定 义 一 个 内 部 样式 表 。 
| 第 4 步 ， 页 面 进行 初始 化 ， 网 页 内 容 为 16 号 黑体 。 表 单 <form> 元 素 宽度 为 600 像素 ， 为 每 行 存 
| 放 3 个 单 选 按钮 确定 空间 ， 并 使 表单 在 浏览 器 居中 显示 。<form> 元 素 的 相对 定位 应 去 掉 ， 此 处 体现 子 
元 素 设置 绝对 定位 时 其 父 元 素 最 好 能 设置 相对 定位 ， 减 少 bug 的 出 现 。 

页面 基 本 设置 及 表单 <form> 元 素 初始 化 */ 

body {font-family:" 黑 体 ": font-size:16px:} 

form {position:relative: width:600px: margin:0 auto: text-align:center:} 

第 5 步 , <p> 标 签 宽度 为 200 像素 , 并 设置 左 浮动 , 实现 表单 (表单 的 宽度 为 600 像素 , 600/200=3) 
内 部 横向 显示 3 个 单 选 按钮 。 各 个 浏览 器 名 称 长 短 不 同 ， 对 其 进行 左 对 齐 设置 ， 达 到 视觉 上 的 对 齐 。 
<p> 标 签 在 不 同 浏览 器 下 默认 间距 大 小 不 一 致 ， 此 处 设置 内 外 间距 为 0 像素 ， 会 发 现 第 一 行 单 选 按钮 
和 第 二 行 单 选 按钮 过 于 紧密 ， 影 响 美观 ， 于 是 设置 上 下 外 间距 (marsgin) 为 10 像素 。 
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Pp{ width:200px: floatleft text-align:left: margin:0: padding:0: margin: 10px Opx:} 


第 6 步 ，<input> 标 签 的 ID 值 和 <label> 标 签 的 for 属性 值 一 致 ， 实 现 二 者 关联 ， | | 
进行 隐藏 操作 。 即 <input> 标 签 设置 为 绝对 定位 ， 并 设置 较 大 的 left 值 ， 比 如 “left:-999em”; <input> 
标签 完全 移出 浏览 器 可 视 区 域 之 外 ,达到 隐藏 该 标签 的 作用 ,为 紧 跟 在 它 后 面 的 文字 设置 背景 图 蔡 代 | | 区 M 
单 选 按钮 (<input> 标 签 ) 做 铺垫 。 


input {position: absolute: left: -999em: } 


| 
第 7 步 ，<label> 标 签 添加 class 类 radiol 和 radio2， 代 表单 选 按钮 未 选中 和 选中 状态 两 种 状态 。 | 
现在 分 别 对 class 类 radiol 和 radio2 进行 设置 ， 二 者 CSS 属性 设置 一 致 ， 区 别 在 于 其 背景 图 的 不 同 。 
具体 方法 如 下 : 
回 ”设置 背景 图 不 平 铺 ， 起 始 位 置 为 左上 角 ， 清 除外 间距 设置 。 背 景 图 的 宽度 是 33 像素 ， 高 度 | 
是 34 像素 ， 即 设置 的 背景 图 和 文字 的 间距 一 定 要 大 于 33 像素 ， 防 止 文字 压 住 背景 图 (文字 
在 图 片上 面 ) 。 
设置 左 内 间距 为 40 像素 (可 调整 大 小 ) ， 设 置 <label> 标 签 高 度 为 34 像素 ， 行 高 也 是 34 像 
实现 垂直 居中 ， 且 完整 显示 背景 图 (高度 值 必 须 大 于 34 像素 ) ， 用 背景 图 代替 单 选 按 | 





pe 览 器 显示 中 观察 页 面 ， 背 景 图 未 显示 完整 ， 此 时 需要 将 <label> 标 签 的 CSS 属性 设置 为 
块 元 素 ， 设 置 的 高 度 才 有 效 。 当 鼠标 移 至 <label> 标 签 时 设置 指针 变化 为 手 形 ， 提 示 当 前 可 以 
单 击 。 最 后 加 入 JavaSeript 脚本 ， 实 现 动态 单 击 选 中 效果 ， 脚 本 不 属于 本 书 介 绍 范围 ， 读 者 
可 以 直接 使 用 (也 可 直接 删除 JavaScript 脚本 ) 。 单 选 按钮 可 以 通过 背景 图 替代， 同样 如 示 
例 ， 使 用 背景 图 也 可 以 替代 复 选 框 的 默认 按钮 样式 。 

radiol {margin: Opx:padding-left: 40px:color: #000:line-height: 34px:height: 34px: 
background:url(img/4.jpg) no-repeat left top;cursor: pointer;display:block: } 

‘Tadio2 {background:url(img/3.jpg) no-repeat left top: } 

本 例 完整 样式 代码 请 参考 本 节 示 例 源 代码 。 

第 8 步 ， 在 正 浏 览 器 中 预览 ， 演示 效果 如 图 13.9 所 示 。 


疱 提示 : 类似 的 复 选 框 设 计 效果 如 图 13.10 所 示 ， 具 体 示例 代码 请 参考 本 节 test2.html 示例 。 





© » EE ET 
请 选择 您 最 言 欢 的 浏览 圳 


Internet Explorer Maxthon 


谷 吉 浏 览 交 © We” 


搜狗 浏览 器 








图 13.9 使 用 背景 图 设计 的 单 选 按钮 样式 13.10 ”使 用 背景 图 设计 的 复 选 框 样式 ”示例 效果 | 
13.2.3 ”定义 选择 框 样式 
不 同 浏览 器 对 于 CSS 控制 选择 框 的 支持 不 是 很 统一 。 一 般 情 况 下 ， 通 过 CSS 可 以 简单 地 设置 选 | 


择 框 的 字体 和 边框 样式 ， 对 下 拉 菜 单 中 的 每 个 选项 定义 单独 的 背景 、 字 体 等 效果 ,但 是 对 于 下 拉 箭 头 | 
的 外 观 需 要 借助 JavaScript 脚本 以 间接 方式 控制 。 


“2 


A 





| 【操作 步骤 】 

| 第 1 步 ， 新 建 一 个 网 页 ， 保 存 为 testhtml， 在 <body> 内 使 用 <form> 标 签 包含 一 个 下 拉 菜单 。 

SEO 

全 | 

一 一 <option class="bjc1"> 北 京 </option> 

| <option class="bjc2"> 上 海 </option> 

Note | <option class="bjc3"> 天 津 </option> 
| <option class="bjc4"> 重 庆 </option> 
| </select> 
| </div> 
| 第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定义 一 个 内 部 样式 表 ， 输 入 下 面 样式 。 
| 添加 不 同 class 类 名 实现 不 同 <option> 标 签 的 背景 颜色 ， 最 终 达到 七 彩虹 颜色 的 下 拉 菜 单 。 
| 第 3 步 ， 为 <select> 标 签 的 父 元 素 <div> 标 签 设置 宽度 为 120 像素 ，IE 浏览 器 下 设置 为 150 像素 ， 
| 超出 部 分 隐藏 ， 通 过 第 2 步 查看 超出 部 分 隐藏 是 否 有 效 。 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


.box {width:120px:width:150px\9: overflow:hidden:} 


第 4 步 ， 为 <select> 标 签 设 置 宽度 为 136 像素 ， 它 的 值 小 于 外 层 <div> 标 签 的 宽度 ， 对 其 设置 高 度 
| 为 23 像素 , 因为 背景 图 像 为 119*23, 最 外 层 的 <div> 标 签 设置 的 宽度 是 背景 图 的 宽度 所 定义 的 。 背景 
| 图 的 设置 是 查看 标准 浏览 器 和 正 浏览 器 对 <select> 标 签 的 支持 情况 。 通 过 图 13.11 和 图 13.12 比较 可 
| 以 发 现 ， 正 浏览 器 超出 部 分 没有 隐藏 ， 且 正 浏览 器 中 <select> 标 签 与 其 子 元 素 <option> 标 签 的 宽度 为 
| 120 像素 ， 而 标准 浏览 器 中 <select> 标 签 宽度 为 136 像素 ， 其 子 元 素 并 没有 与 <select> 标 签 宽度 一 致 ， 
| 而 是 与 <div> 标 签 宽度 一 致 ， 通 过 为 box 设置 高 度 200 像素 及 背景 色 可 查看 。 
| Select{width:136px: color: #909993; border:none:height:23px: line-height:23px: 

background:none;backeround:url(images/5.jpg) no-repeat left top: color:#000000; font-weight:bold;} 

.box {height:200px: background-color:#3C9} 

第 5 步 , 为 下 拉 菜 单 的 每 个 选项 设置 不 同 的 背景 颜色 , 通过 <option> 标 签 的 不 同 的 class 名 设置 不 
| 同 的 背景 颜色 ,实现 七 彩虹 效果 。<option> 标 签 的 值 与 <select> 标 签 高 度 应 一 致 ， 设 置 为 手 形 ， 高 度 为 
| 23 像素， 更 改 鼠 标 样式 为 手 形 。 
| ger 

-bjc2 {background-color:#F96} 

-bjc3 {background-color:#0F0} 

-bjc4 {background-color:#C60} 

‘option {font-weight:bold; border:none: line-height:23px; height:23px: cursor:pointer:} 


| 
| 
| 
| 
| 
| 第 6 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 演 示 效 果 如 图 13.11 和 图 13.12 所 示 。 
| 
| 
| 
| 
| 








图 13.11 正 浏 览 器 中 下 拉 菜 单 不 支持 背景 图 图 13.12 Firefox 浏览 器 中 下 拉 菜 单 支 持 背 景 图 
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通过 比较 发 现 , IE 浏览 器 不 支持 <select> 标 签 的 背景 图 设置 , 而 Firefox 浏览 器 则 已 经 实现 。 谷歌 、| 
Opera 等 浏览 器 也 不 支持 。 通 过 JavaScript 和 CSS 相 结 合 可 以 模拟 <select> 标 签 。 | 
如 果 下 拉 菜单 设计 简单 ， 只 有 对 下 拉 菜单 的 宽度 、 字 体 颜 色 等 简单 要 求 的 效果 ， 采 用 <select> 标 | 
签 , 如 果 需 要 含有 特殊 的 设计 效果 ， 对 其 背景 图 设置 ， 改 变 下 拉 菜 单 下 拉 按 钮 形状 ， 一 般 都 是 通过 其 | 
他 标签 模拟 实现 下 拉 菜单 的 效果 ， 而 不 再 通过 <selecf> 标 签 设置 。 ee 
| Note 


13.3 案例 实战 


本 节 将 结合 几 个 案例 详细 讲解 表格 和 表单 页 面 的 一 般 设 计 方 法 。 
13.3.1 设计 细 线 表格 

本 例 使 用 CSS3 的 border-radius 为 表格 定义 圆 角 ; 使 用 box-shadow 为 表格 添加 内 阴影 ， 设 计 高 亮 
边 效 果 ; 使 用 transition 定义 过 渡 动 画 ， 让 鼠标 指针 移 过 数据 行 ， 渐 显 浅 色 背景 : 使 用 lineargradientO | 


函数 定义 标题 列 渐变 背景 效果 ， 以 蔡 换 传统 使 用 背景 图 像 模拟 渐变 效果 ;使 用 text-shadow 属性 定义 
文本 阴影 ， 让 标题 文本 看 起 来 更 富 立 体感 。 演 示 效 果 如 图 13.13 所 示 。 





之 -| Er 


历届 奥运 会 中 国 奖牌 数 
城市 
税 棚 机 (英国 ) 


亚 村 兰 大 (要 | 
悉尼 (要 大 利 亚 ) 
休 认 项 开 ) 


里 的 执 内 卢 (巴西) 





图 13.13 设计 表格 样式 


【操作 步骤 】 | 
第 1 步 ， 新 建 HTML5 文档 ， 设 计 表格 结构 。 | 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖牌 数 </caption> 
<tr><th> 编 号 </ 了 h><th> 年 份 </ 了 h><th> 城 市 </th>< 了 h> 金 牌 </ 耻 >< 耻 > 银牌 </th><th> 铜 牌 </th><th> 总 计 
</th></tr> 
</thead> 


<tr><td> 第 23 届 </td><td>1984 年 <td><td> 洛 杉 矶 (美国) </td><td>15</td> <td>8</td><td>9 
</td><td>32</td></tr> 

<tr><td> 第 24 届 </td><td>1988 年 </td><td> 汉 城 ( 韩 国 ) </td><td> 5</td><td>11</td><td>12 
</td><td>28</td></tr> 

<tr><td> 第 25 届 </td><td>1992 年 </td><td> 巴 塞 罗 那 (西班牙 ) </td><td>16</td><td>22</td><td>16 


“a 


| 区 ~、 La ( 微 课 精 编 版 ) 
| <htq><td>54</td></tr> 
| <tr><td> 第 26 届 </td><td>1996 年 <td><td> 亚 特 兰 大 (美国 ) </td><tdt>16</td><td>22</td> 
| <td>12</d><td>50</td></tr> 
| <tr><td> 第 27 届 </td><td>2000 年 </td><td> 悉 尼 澳大利亚) </td><td>28</td><td>16</td><td> 
全 fF 9 
一 一 <tr><td> 第 28 届 </td><td>2004 年 <ltd><td> 雅 典 ( 希 腊 〉</td><td>32</td><td>17</td><td> 


14</td><td>63</td></tr> 
<tr><td> 第 29 届 </td><td>2008 年 <td><td> 北 京 〈 中 国 ) </htd><td>51</td><td>21</td><td> 
| 28</td><td>100</td></t> 
| <tr><td> 第 30 届 </td><td>2012 年 <ltd><td> 伦 敦 〈 英 国 ) </td><td>38</td><td>27</td><td>23 
| <hd><td>88</td></tr> 

<tr><td> 第 31 届 </td><td>2016 年 </td><td> 里 约 热 内 卢 (巴西 ) </td><td>26</td><td>18</td><td>26 
<htd><td>70</td></t> 


<tfoot> 
<tr><th> 合 计 </th><td colspan="4">544 枚 </td></tr> 
</tfoo> 
</table> 


在 这 个 表格 中 使 用 的 标记 从 上 至 下 依次 为 <caption>、<thead>、<tbody> 和 <tfoot>， 分 别 定义 表格 

的 标题 、 列 标题 行 、 数 据 区 域 、 脚 注 行 。 
| 第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 
| 式 代码 定义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 
| table { 
| *border-collapse: collapse; /* 兼 容 IE7 及 其 以 下 版 本 浏览 器 */ 
| border-spacing: 0; 

Width: 100%:} 

.bordered { 

border: solid #ccce 1px: 
| border-radius: 6px: 
| box-shadow: 0 1px 1px 大 cc:} 
| 


第 3 步 ， 输 入 下 面 样式 统一 单元 格 样式 ， 定 义 边框 、 空 隙 效果 。 

-bordered td. .bordered th { 
| border-left: 1px solid 大 cc: 
| border-top: 1px solid #ccc: 
| padding: 10px: 

text-align: left:} 

第 4 步 ， 输 入 下 面 样式 代码 设计 表格 标题 列 样式 ， 通 过 渐变 效果 设计 标题 列 背 景 效果 ， 并 适当 添 
| 加 阴影 ， 营 造 立体 效果 。 
| ‘bordered th { 





background-color: #dce9f9: 

background-image: linear-gradient(top. #ebf3fc. #dce9f9): 
box-shadow: 0 1px 0 rgba(255.255.255..8) inset: 
border-top: none: 

text-shadow: 0 1px 0 rgba(255.255,255,.5):} 


第 5 步 ， 输 入 下 面 样式 代码 ， 设 计 圆 角 效果 。 在 制作 表格 圆 角 效果 之 前 ， 有 必要 先 完成 这 一 步 。 
| 表格 的 border-collapse 默认 值 是 separate， 将 其 值 设置 为 0， 也 就 是 “border-spacing:0; ”。 
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table { 
*border-collapse: collapse: /# 兼 容 IE7 及 其 以 下 版 本 浏览 器 */ 
border-spacing: 0; 
} 
为 了 能 兼容 了 7 以 及 更 低 的 浏览 器 , 需要 加 上 一 个 特殊 的 属性 一 一 border-collapse, 并 且 将 其 值 设 | 
置 为 collapse。 Note 
第 6 步 ， 设 计 圆 角 效果 ， 具 体 代 码 如 下 : ree 
/* 一 整个 表格 设置 了 边框 ， 并 设置 了 圆 角 一 */ | 
.bordered { border: solid #ccc 1px: border-radius: 6px:} 
/*- 一 表格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 一 */ 
-bordered th:first-child { border-radius: 6px 0 0 0:} 
/* 一 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 一 */ 
‘bordered th:last-child { border-radius: 0 6px 0 0:} 
/#* 一 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 一 */ 
‘bordered tr:last-child td:first-child {border-radius: 0 0 0 6px:} 
/*== 表 格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 一 */ 
.bordered tr:last-child td:last-child {border-radius: 0 0 6px 0:} | 
| 
第 7 步 ， 由 于 在 table 中 设置 了 一 个 边框 ， 为 了 显示 圆 角 效果 ， 需 要 在 表格 的 四 个 角 的 单元 格 上 | 
分 别 设置 圆 角 效果 ， 并 且 其 圆 角 效果 需要 和 表格 的 圆 角 值 大 小 一 样 ， 反 之 ， 如 果 在 table 上 没有 设置 | 
边框 ， 只 需要 在 表格 四 个 角落 的 单元 格 设置 圆 角 就 能 实现 圆 角 效果 。 
/一 表格 头 部 第 一 个 也 需要 设置 一 个 左上 角 圆 角 一 * 
.bordered th:first-child { border-radius: 6px 0 0 0:} 
* 一 表格 头 部 最 后 一 个 也 需要 设置 一 个 右上 角 圆 角 二 */ 
‘bordered th:last-child { border-radius: 0 6px 0 0:} 
/一 表格 最 后 一 行 的 第 一 个 td 需要 设置 一 个 左下 角 圆 角 一 */ 
.bordered tfoot td:first-child {border-radius: 0 0 0 6px:} 
/= 表格 最 后 一 行 的 最 后 一 个 td 需要 设置 一 个 右 下 角 圆 角 一 */ 
.bordered tfoot td:last-child {border-radius: 0 0 6px 0:} 
在 上 面 的 代码 中 使 用 了 许多 CSS3 的 伪 类 选择 器 。 
第 8 步 ， 除 了 使 用 了 CSS3 选择 器 外 ， 本 案例 还 采用 了 很 多 CSS3 的 相关 属性 ， 这 些 属性 将 在 后 | 
面 章节 中 进行 详细 介绍 。 例 如 : 
使 用 box-shadow 制作 表格 的 阴影 。 


.bordered { box-shadow: 0 1px 1px #ccc:} 
使 用 transition 制作 hover 过 渡 效 果 。 
.bordered tr {transition: all 0.1s ease-in-out:} 
使 用 gradient 制作 表 头 渐变 色 。 


-borderedth { 
background-color: #dce9f9: 
background-image: linear-gradient(to top. #ebf3fc. #dce9f9): 











} 


第 9 步 ， 本 例 使 用 了 CSS3 的 text-shadow 来 制作 文字 阴影 效果 ， 使 用 rgba 改变 颜色 透明 度 等 。 
第 10 步 ， 为 <table> 标 签 应 用 bordered 类 样式 即 可 。 


<table summary= "历届 奥运 会 中 国 奖牌 数 ” class= "bordered"> 
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| 13.3.2 ”设计 斑马 线 表格 
本 例 在 前 面 示例 的 数据 表格 结构 的 基础 上 使 用 CSS3 技术 设计 一 款 斑马 线 表 格 ， 效 果 如 图 13.14 


让 








| 
加 9 
| 和 里 的 扫 内 卢 (巴西) 
回 幅 法 六 臣 
本 图 13.14 设计 单线 表格 效果 
【操作 步骤 】 


| 第 2 步 ， 在 头 部 区 域 <head> 标 签 中 插入 一 个 <style type="text/css"> 标 签 ， 在 该 标签 中 输入 下 面 样 
| 式 代码 定义 表格 默认 样式 ， 并 定制 表格 外 框 主题 类 样式 。 
table { 
*border-collapse: collapse: /* IE7 and lower */ 
border-spacing: 0; 
width: 100%:; 


| 
| 
| 
| 第 1 步 ， 新建 HTMLS 文档 ， 复 制 13.3.1 节 示例 的 数据 表格 结构 。 


} 


| 
| 
| 
| 
| 第 3 步 ， 设 计 单 元 格 样式 和 标题 单元 格 样式 ， 取 消 标题 单元 格 的 默认 加 粗 和 居中 显示 。 
| table td, .table th { 

| 

| 

| 

| 


padding: 4px: 证 增 大 单元 格 补 白 ， 避 免 拥 挤 */ 

border-bottom: 1px solid #f2f2f2: 诺 定义 下 边框 线 */ 

text-align: left: 诺 文本 左 对 齐 */ 

font-weight:normal: 片 取消 加 粗 显示 */ 
第 4 步 ， 为 列 标题 行 定义 渐变 背景 ， 同 时 增加 高 亮 内 阴影 效果 ， 为 标题 文本 增加 淡淡 阴影 色 。 
‘table thead th { 


text-shadow: 0 1px 1px rgba(0.0.,0,.1); 

border-bottom: 1px solid #cce: 

background-color: #eee: 

background-image: linear-gradient(to top. #f5f5f5. #eee): 


} 

第 5 步 ， 设 计数 据 隔行 换 色 效果 。 

.table tbody tr:nth-child(even) { 
background: #f5f5f5; 
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box-shadow: 0 1px 0 rgba(255.255.255..8) inset: 
} 
第 6 步 ， 设 计 表 格 圆 角 效果 。 


上 # 左上 角 圆 角 */ 

:table thead th:first-child { border-radius: 6px 0 0 0:} | 

上 # 右上 角 圆 角 */ 
table thead th:last-child {border-radius: 0 6px 0 0:} | 
和 # 左下 角 圆 角 */ | 
:table tfoot td:first-child., .table tfoot th:first-child{ border-radius: 0 0 0 6px:} | 
和 # 右 下 角 圆 角 */ | 
table tfoot td:last-child. .table tfoot th:last-child {border-radius: 0 0 6px 0;} 


13.3.3 设计 结构 样式 表格 


本 例 通过 树 形 结构 来 设计 层次 清晰 的 分 类 数据 表格 效果 。 整 个 表格 样式 设计 包含 4 个 技巧 ; 

回 ”适当 修改 数据 表格 的 结构 ， 使 其 更 利于 树 形 结构 的 设计 。 

回 ”借助 背景 图 像 应 用 技巧 来 设计 树 形 结构 标志 。 

回 “借助 伪 类 选择 器 来 设计 鼠标 经 过 行 时 变换 背景 色 。 | 
| 
| 























通过 边框 和 背景 色 来 设计 列 标题 的 立体 显示 效果 。 

【操作 步骤 】 

第 1 步 ， 新 建 HTMLS 文档 ， 复 制 13.3.2 节 示例 的 数据 表格 结构 。 

第 2 步 ， 修 改 数据 表 的 结构 。 在 修改 数据 表 结 构 时 ， 不 要 破坏 数据 表 的 基本 结构 ， 主要 强化 数据 | 
表格 的 分 组 。 使 用 thead 把 标题 分 为 一 组 〈 标 题 区 域 )， 使 用 多 个 tbody 把 数据 分 为 多 组 (数据 区 域 )。 | 
根据 数据 分 类 的 需要 ， 在 每 个 tbody 内 部 增加 一 个 合并 的 数据 行 ， 该 行 仅 包含 了 一 个 单元 格 ， 为 了 避 | 
免 破坏 结构 ， 使 用 colspan="7" 合 并 单元 格 。 经 过 修改 之 后 的 数据 表格 结构 如 下 。 


<table summary=" 历 届 奥 运 会 中 国 奖牌 数 "> 
<caption> 历 届 奥 运 会 中 国 奖牌 数 </caption> 





| 
<t></tr> | 
</thead> | 
<tr><td colspan="7"> 第 一 时 期 </td></tr> | 
tr>e > | 
<tr>… ‘</tr> | 
< > | 
<tr> </tr> | 
<tr> ‘</tr> | 
<tr> /> | 
<ltbody> 
<tbody> | 
<tr><td colspan="7"> 第 二 时 期 <ltd></t> | 
<tr> </tr> | 
< </tr> 
一 [> </tr> | 
/tbody> | 
<tfoot> | 
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<tr><th> 合 计 </th><td colspan="6">543 枚 </td></tr> 


会 内 | 第 3 步 ， 重 置 基本 表格 对 象 的 默认 样式 。 例 如 ， 在 body 元 素 中 定义 页 面 字体 类 型 ， 通 过 table 元 
一 素 定义 数据 表格 的 基本 属性 ， 以 及 其 包含 文本 的 基本 显示 样式 。 同 时 统一 标题 单元 格 和 普通 单元 格 的 
“oy (oomily- 末 休 " ii eNetica SGSSGHE 页 面 字体 闫 型 /页 面 基本 属性 忆 
table {/* 表格 基本 样式 */ 


border-collapse: collapse: 让 合并 单元 格 边框 */ 
| font-size: 85%:; 翌 字体 大 小 ， 约 为 14 像素 */ 
| line-height: 1.1: 证 行 高 ， 使 数据 显得 更 紧凑 */ 
| Width: 96%; 上 # 固定 宽度 */ 
| margin: auto; 上 # 水 平 居中 显示 */ 
border:solid 6px #c6ceda: 让 添加 粗 边框 ， 颜 色 与 标题 行 背景 色 一 致 */ 
} 
也 {/* 列 标题 基本 样式 */ 
| font-weight: normal; 必 普通 字体 ， 不 加 粗 显示 */ 
| text-align: left: 上 #* 标题 左 对 齐 */ 
| padding-left: 15px: 让 定义 左 侧 补 白 */ 


} 
| 也 , td {padding: .6em .6em: /* 增加 补 白 效果 ， 避 免 数 据 拥挤 在 一 起 */}/* 单元 格 基本 样式 */ 
| 第 4 步 ， 定义 列 标题 的 立体 效果 。 列 标题 的 立体 效果 主要 借助 边框 样式 来 实现 ， 设 计 顶 部 、 左 侧 
| 和 右 侧 边框 样式 为 像素 宽 的 白色 实 线 , 而 底部 边框 则 设计 为 2 像素 宽 的 浅 灰 色 实 线 , 这 样 就 可 以 营造 
| 出 一 种 淡淡 的 立体 凸 起 效果 。 
”thead th.tfoot 也 , tfoot td {/* 列 标题 样式 立体 效果 */ 


background: #c6ceda; /* 背景 色 */ 
| border-color: #ffF HEHEASS8S #fFF: 证 配置 立体 边框 效果 */ 
| border-style: solid: 证 实 线 边框 样式 */ 
| border-width: 1px 1px 2px 1px: 店 定义 边框 大 小 */ 
padding-left: .Sem: 让 增加 左 侧 的 补 白 */ 


| } 
| 第 5 步 ， 定 义 树 形 结构 效果 。 树 形 结构 主要 利用 虚线 背景 图 像 ( “和 “ ) 来 模拟 ,借助 背景 


| 图 像 的 灵活 定位 特性 可 以 精确 设计 出 树 形 结构 样式 , 然后 使 用 结构 伪 类 选择 器 分 别 把 它们 应 用 到 每 行 


| 的 第 一 个 单元 格 中 。 

| tbody tr td:first-child {/* 树 形 结构 非 末 行 图 标 样式 */ 

| background: url(images/dots.gif) 18px 54% no-repeat: 让 定义 树 形 结构 末 行 图 标 */ 

| padding-left: 26px: 庆 增加 左 侧 的 补 白 */ 

| } 

| tbody tr:last-child td:first-child {/* 树 形 结构 末 行 图 标 样式 */ 

| background: url(images/dots2.gif) 18px 54% no-repeat: /# 定 义 树 形 结构 的 末 行 图 标 */ 
padding-left: 26px: 庆 增加 左 侧 的 补 白 所 


} 

| 

| 第 6 步 ， 为 分 类 标题 行 定义 一 个 样式 类 。 通 过 为 该 行 增加 一 个 提示 图 标 ， 以 及 行 背景 色 ， 来 区 分 
不同 分 类 行 之 间 的 视觉 分 类 效果 。 
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tbody tr:first-child td {/* 数据 分 类 标题 行 的 样式 */ 
background:#eee url(images/arrow.gif) no-repeat 12px 50%; 。“ /* 背景 图 像 ， 定 义 提示 图 标 */ 





| 
padding-left: 28px: /* 增加 左 侧 的 补 白 所 | 
font-weight:bold: 庆 字体 加 粗 显 示 */ | 
color#444: 刻 字体 颜色 */ | 
} Mie a 
第 7 步 ， 设 计 当 鼠 标 经 过 每 行 时 变换 背景 色 ， 以 此 显示 当前 行 效果 。 
trihover td.start:hover, td.end:hover fj* 鼠标 经 过 行 、 单 元 格 时 的 样式 */ | 
background: #FF9; /# 变换 背景 色 *#/ | 
i | 


第 8 步 ， 保 存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 13.15 所 示 。 


历届 奥运 会 中 国 奖牌 数 


ea 





请 世 而 《天 国 ) 
如 由 0 加) 
ES (5) 
亚 交 大 (于 加 ) 
要 尼 ( 清 大 利 焉 ) 
于 (基山) 


(中 加 
他 下 (加 ) 
(EE) 


图 13.15 设计 数据 分 组 表格 效果 
13.3.4 设计 登录 表单 


登录 页 面 一 般 比 较 简单 ， 包 含 的 结构 和 信息 都 很 简单 ,但 是 要 设计 一 个 比较 有 新 意 的 登录 框 ， 需 EE 
要 用 户 提前 在 Photoshop 中 进行 设计 ， 然 后 再 转换 为 HTML 标准 布局 效果 。 

这 是 一 款 个 性 的 网 站 登录 页 面 ， 从 效果 来 看 ， 登 录 框 精致 、 富 有 立体 效果 ， 表单 对 象 的 边框 色 使 | 
用 #HEF 值 进行 设置 ， 定 义 为 白色 : 表单 对 象 的 阴影 色 使 用 rgba(0.0.0.0.10) 值 进行 设置 ， 定 义 为 非常 透明 | 
的 黑色 ; 字体 颜色 使 用 hsla(0,0%,100%,0.9) 值 进行 设置 ， 定 义 为 轻微 透明 的 白色 ， 如 图 13.16 所 示 。 
示例 主要 代码 如 下 所 示 : 





€ GOEIEICTISEEII ET 





图 13.16 设计 登录 表单 
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<style type="text/css"> 

body{ /* 为 页 面 添加 背景 图 像 ， 显 示 在 中 央 项 部 位 置 ， 并 列 且 完全 覆盖 窗口 */ 
backeround: #edfcc url(images/bg.jpg) no-repeat center top: 
background-size: cover: 


} 
.form { /* 定义 表单 框 的 样式 */ 


width: 300px: /#* 固定 表单 框 的 宽度 */ 
margin: 30px auto: /# 居中 显示 */ 
border-radius: 5px: 局 设计 圆 角 效果 */ 
box-shadow: 0 0 Spx Tgba(0.0.0.0.1)、 请 设计 润 边 效果 */ 
0 3px 2pxIgba(0.0.0.0.1): 居 设计 淡淡 的 阴影 效果 */ 
} 
:form p {/* 定义 表单 对 象 外 框 圆 角 、 白 边 显示 */ 
width: 10096: 
float: left; 
border-radius: Spx: 


border: 1px solid #ffF: 


} 
店 定义 表单 对 象 样式 */ 
.form input[type=text]. 
.form input[type=password] { 
此 固定 宽度 和 大 小 */ 
width: 100%; 
height: SOpx: 


padding: 0; 
全 增加 修饰 样式 */ 
border: none: /# 移出 默认 的 边框 样式 */ 
background: rgba(255,255.255.0.2); 此 增加 半 透 明 的 白色 背景 */ 
box-shadow: inset 0 0 10px Teba(255.255.255.0.5): /# 为 表单 对 象 设 计 高 亮 效果 */ 
上 # 定义 字体 样式 */ 
text-indent: 10px: 
font-size: 16px; 
color:hsla(0.096.10096.0.9): 
text-shadow: 0 -1px 1px Tgba(0.0.0.0.4): 庆 为 文本 添加 阴影 ， 设 计 立 体 效果 */ 
} 
.form input[type=text] { 上 # 设计 用 户 名 文本 框 底部 边框 样式 ， 并 设计 项 部 圆 角 */ 
border-bottom: 1px solid rgba(255.255.255.0.7): 
border-radius: 5px Spx 0 0: 
} 
.form input[type=password] { 证 设计 密码 域 文本 框 顶部 边框 样式 ， 并 设计 底部 圆 角 */ 
border-top: 1px solid rgba(0.0.0.0.1): 
border-radius: 0 0 Spx Spx: 


} 
谨 定义 表单 对 象 被 激活 ， 或 者 鼠标 经 过 时 增 亮 背 景色 ， 并 清除 轮廓 线 */ 
.form input[type=textj:hover 
.form input[type=password]:hover. 
.form input[type=text]:focus. 
.form input[type=password]:focus { 
background: rgba(255.255.255.0.4): 
outline: none: 
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</style> 
<form class="form"> 
BE 
<input type="text" id="login" name="login" placeholder=" 用 户 名 "> 
<input type="password" name="password" id="password" placeholder=" 密 码 "> 
<p> 


</form> 


13.3.5 ”设计 搜索 表单 


大 部 分 网 站 都 会 提供 站 内 搜索 , 如 何 设 计 好 用 的 搜索 框 是 很 多 用 户 需要 思考 的 问题 。 在 各 大 站 点 
甚至 是 一 些小 型 网 站 都 包含 大 量 个 性 各 异 的 搜索 框 ， 但 功能 局 限 在 其 相关 网 站 中 的 内 容 搜索 。 | 
搜索 框 一 般 包 含 “关键 词 输入 框 ”“ 搜 索 类 别 ”“ 搜 索 提 示 ”“ 搜 索 按钮 ” 简单 的 搜索 框 只 有 “ 关 | 
键 词 输入 框 ” 和 “搜索 按钮 ”这 两 部 分 。 本 案例 将 介绍 如 何 设计 附带 有 提示 的 搜索 框 样式 。 演 示 效 果 | 
如 图 13.17 所 示 。 | 








13.17 设计 搜索 框 示例 效果 


【操作 步骤 】 | 
第 1 步 ， 启 动 Dreamweaver， 新 建 一 个 网 页 ， 保 存 为 test.html， 在 <body> 标 签 内 输入 如 下 结构 代 | 
码 构建 表单 结构 。 


<div class="search_box"> 
<h3> 搜 索 框 </h3> 
<div class="content"> 
<form method="post" action=""> 
<select> | 
<option value="1"> 网 页 </option> | 
<option value="2"> 图 片 </option> | 
<option value="3"> 新 闻 </option> 
<option value="4">MP3</option> 
</select> 
<input type="text" value="css" /> <button type="submit"> 搜 索 </button> | 
<div class="search tips"> | 
<h4> 搜 索 提示 </h4> | 
<uUl> 
<li><a hre 仁 "#">css 视频 </a><span> 共 有 589 个 项 目 </span></li> 
<li><a hre 伍 "#">css 教程 </a><span> 共 有 58393 个 项 目 </span></li> 
<li><a hre 仁 "#">csstdiv</a><span> 共 有 158393 个 项 目 </span></li> 
<li><a hre 仁 "#">css 网 页 设计 </a><span> 共 有 58393 个 项 目 </span></li> 
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<li><a href="#">css 样式 </a><span> 共 有 158393 个 项 目 </span></li> 


</ul> 
</div> 
</form> 
击 区 </div> 
攻克 | </div> 
整个 表单 结构 分 为 两 部 分 ， 将 “下 拉 选 择 ”“ 文 本 框 ?“ 按 钮 ” 归 为 一 类 ， 主 要 功能 是 用 于 搜索 信 


| 息 ; “搜索 提 示 ” 为 当 在 “文本 框 ”中 输入 文字 时 ， 将 会 出 现 相对 应 的 搜索 提示 信息 ， 该 功能 主要 是 
由 后 台 程 序 开发 人 员 实 现 ， 前 台 设 计 师 只 需要 将 其 以 页 面 元 素 表现 即 可 。 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/css"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 逐步 输入 
CSS 代码 ， 设 计 表 单 样式 。 
第 3 步 ， 通 过 分 析 最 终 效 果 可 以 看 到 ， 页 面 中 并 没有 显示 “站 内 搜索 ”和 “搜索 提示 ”这 两 个 标 
题 ， 且 “搜索 按钮 ”是 以 图 片 代替 的 ,“ 搜 索 提示 ”出 现在 “搜索 输入 框 ” 的 底部 ， 并 且 宽 度 与 输入 
框 相等 。 为 此 ， 开 始 在 内 部 样式 表 中 输入 下 面 样式 ， 对 表单 结构 进行 初始 化 设计 。 
,Search box { /* 设置 输入 框 整体 宽度 、 相 对 定位 ， 为 其 子 级 元 素 的 定位 参考 */ 
position:relative; 
width:360px:} 
.search_box * {/* 清除 输入 框 内 所 有 元 素 的 默认 样式 ， 并 且 设 置 字体 样式 等 */ 
margin:0; 
| padding:0: 
| list-style:none: 
| font:normal 12px/1.5em "宋体 ", Verdana,Lucida, Arial, Helvetica, sans-serif:} 
| .search_box h3, .search_tips h4 {display:none; } /* 隐藏 标题 文字 */ 


第 4 步 ,设置 搜索 框 整体 的 宽度 属性 值 以 及 其 所 有 子 元 素 的 内 补丁 、 边 界 等 相关 属性 。 为 了 方便 
将 搜索 提示 信息 框 通过 定位 的 方式 显示 在 搜索 输入 框 的 底部 , 可 以 在 .search_box 中 定义 position 属性 ， 
让 其 成 为 子 级 元 素 定位 的 参照 物 。 文 档 结构 中 的 标题 在 页 面 中 不 需要 显示 ， 因 此 可 以 将 其 隐藏 。 虽然 
现在 只 是 将 标题 文字 隐藏 了 ， 但 在 后 期 网 站 开发 过 程 中 需要 显示 时 ， 可 以 直接 通过 CSS 样式 修改 ， 
| 而 不 需要 再 次 调整 文档 结构 。 


.search_box select {/* 将 下 拉 框 设置 浮动 ， 并 设置 其 宽度 值 */ 
float:left: 
| width:60px:} 
| ,Search box input {/* 设置 搜索 输入 框 浮动 显示 */ 
| float:left: 
width:196px: 
height:14px: 
padding: 1px 2px: 
| margin:0 Spx: 
| border:1px solid #619FCF:} 
| .Search box button {/* 设置 按钮 浮动 ， 以 缩 进 方式 隐藏 按钮 上 的 文字 */ 
| float:left: 
width:59px: 
height: 18px: 
text-indent:-9999px: 
border:0 none: 
background:url(images/btn_search.gif) no-repeat 0 0: 
cuUrsorpointer:} 
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第 5 步 ,“ 搜 索 类 别 ” 下 拉 框 、“ 搜 索 关键 字 ” 输 入 框 和 “搜索 ”按钮 这 三 个 元 素 按照 常理 来 理解 | 
原本 就 是 可 以 并 列 显示 的 ， 但 为 了 将 这 三 个 元 素 之 间 的 默认 空间 缩短 ， 因 此 使 用 “floatleft ”使 它们 | 
之 间 的 距离 缩短 。 再 利用 输入 框 input 增加 可 控 的 边界 “margin:0 Spx:” 调 整 三 者 之 间 的 距离 。 | 
三 者 之 间 整 体 样式 调整 完毕 后 ， 再 对 其 细节 部 分 进行 详细 的 调整 修饰 。 美 化 输入 框 并 且 利用 文字 | 
缩 进 属性 隐藏 按钮 上 的 文字 ， 使 用 图 片 代 蔡 。 | 
第 6 步 ， 下 拉 框 <select> 标 签 只 是 设置 了 宽度 属性 值 ， 并 未 设置 其 高 度 属性 值 ， 其 中 的 原因 就 是 
正 浏览 器 和 Firefox 浏览 器 对 其 高 度 属性 值 的 解析 完全 不 一 样 ， 因 此 采用 默认 的 方式 而 不 是 再 次 利用 | 
CSS 样式 定义 其 相关 属性 。 | 
第 7 步 ， 按 钮 <button> 标 签 在 默认 情况 下 不 显示 手 形 样式 ， 因 此 需要 特殊 定义 。 
-Search tips { /* 将 搜索 提示 框 设 置 的 宽度 与 输入 框 相等 ， 并 绝对 定位 在 输入 框 底部 */ 
position:absolute: 
top:17px; 
left:65px:; 
width:190px: 
padding:Spx Spx 0: 
border:1px solid #619FCF:} 
第 8 步 , 搜索 提示 框 使 用 绝对 定位 的 方式 显示 在 输入 框 的 底部 ， 其 宽度 属性 值 等 于 输入 框 的 宽度 
属性 值 ， 可 以 提高 视觉 效果 上 的 完美 。 不 设置 提示 框 的 高 度 属性 值 是 希望 搜索 框 能 随 着 内 容 的 增加 而 
自 适 应 高 度 。 


.Search tips li {/* 设置 搜索 提示 框 内 的 列表 高 度 和 高 度 值 ， 利 用 浮动 避免 正 浏览 器 中 列表 上 下 间距 增 大 的 
BUG*/ 





width:100%; 
height:22px; 
line-height:22px:} 

第 9 步 , 在 正 浏 览 器 中 , 列表 <li> 标 签 上 下 间距 会 因为 增 大 了 上 下 间距 的 bug 问题 , 为 了 避免 该 
问题 的 出 现 ， 将 所 有 列表 <1i> 标 签 添加 浮动 foat 属性 。 宽 度 属性 值 设 置 为 100% 可 以 避免 当 列 表 二 标 
签 具 有 浮动 属性 时 ， 宽 度 自 适应 的 问题 。 

-search tips lia { /* 搜索 提示 中 相关 文字 居 左 显示 ， 并 设置 相关 样式 */ 

float:left: 
text-decoration:none: 
color:#333333:} 

-Search tips li ashover { /* 搜索 提示 中 相关 文字 在 鼠标 悬 停 时 显示 红色 文字 */ 

color:#FF0000:} 

-Search tips li span { /* 以 灰色 弱化 搜索 提示 相关 数据 ， 并 居 右 显示 */ 

float:right: 
color:#CCCCCC:} 


第 10 步 ， 将 列表 项 <li> 标 签 中 的 锚 点 <a> 标 签 和 <span> 标 签 分 别 左右 浮动 ， 使 它们 和 两 边 显示 在 | 
搜索 提示 框 内 ， 并 相应 地 添加 文字 样式 做 细节 调整 。 


13.3.6 ”设计 联系 表单 
本 例 设计 一 个 联系 表单 ， 使 用 CSS 背景 图 像 来 设计 表单 样式 ， 使 其 更 具 艺 术 化 。 


| 
float:left: | 
| 
| 
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| 【操作 步骤 】 
| 第 1 步 ， 启 动 Dreamweaver， 新 建 HTMLS 文档 ， 保 存 为 index.html。 
| 第 2 步 ， 在 页 面 中 构建 HTML 导航 框架 结构 。 切 换 到 代码 视图 ， 在 <body> 标 签 内 手动 输入 下 面 


| 代码， 定义 表单 框架 结构 。 
fom id="ficldset" action="default.asp" method="post"> 
<h2> 联 系 表单 <bh2> 
| <label for=name> 姓 名 </label> 

<input class="textfield" id="name" name="name"><br> 
<label for=email>Email</label> 
<input class="textfield" id="email" name="email"><br> 
| <label for=website> 网 址 </label> 
| <input class="textfield" id="website" value="http://" name="website"><br> 
| <label for=comment> 反 馈 </label> 

<textarea class="textarea" id="comment" name="comment" rows="15" cols="30"></textarea><br> 

<label for=submit>&nbsp:</label> 

<input class="submit" id="submit" type="submit" value=" 提 交 " name="submit"> 
</form> 
第 3 步 ， 在 <head> 标 签 内 输入 <style type="text/css">， 定 义 一 个 内 部 样式 表 ， 然 后 在 <style> 标 签 
| 内 手动 输入 下 面 样式 代码 。 
| body fr 定义 页 面 属性 */ 





| font-size: 12px: /# 定义 字体 大 小 */ 
| margin: 50px; 上 # 定义 边界 ， 避 免 顶部 跑 到 页 面 外 边 */ 
| color: #666; 上 定义 颜色 */ 


font-family: 宋体 , verdana, arial, helvetica. sans-serif 。“/* 定义 字体 */} 
#fieldset {/* 定 义 表单 属性 */ 


border: #ffF Opx solid: 语 清除 边框 */ 
| width: 300px; 入 定义 表单 域 宽度 */ 
| background-color: #ccc: 上 # 定义 浅 灰 色 背 景 */} 
| #fieldset h2 {/* 定 义 表 单 标题 属性 */ 
padding: 0.2em:; 店 定义 补 白 ， 增 加 边缘 空隙 */ 
margin:0: /# 清除 标题 预定 义 边界 */ 
position: relative: /# 相对 定位 */ 
| top: -lem; 履 在 现 有 流 位 置 向 上 移动 一 个 字体 距离 */ 
| background: url(h2_bg.gif) no-repeat: 上 # 定义 背景 图 像 ， 圆 角 显示 */ 
| width: 194px: 证 定义 宽度 ， 该 宽度 与 背景 图 像 宽度 相同 */ 
font-size: 2em: 上 # 定义 字体 大 小 */ 
color: #fF: 证 定义 字体 颜色 */ 
white-space: pre: 保留 标题 预定 义 格式 ， 可 以 保留 多 行 显示 */ 


| letter-spacing: -1px: 上 # 收缩 字 距 */ 
| text-align:center: /# 居中 显示 */} 
| #fieldset label {/* 定 义 表 单 标签 属性 六 
padding: 0.2em: 证 增加 边 距 空隙 */ 
margin: 0.4em Opx Opx: 证 增加 顶部 边界 ， 加 大 与 上 一 个 控件 的 间距 */ 
float: left: 请 向 左 浮动 */ 
width: 70px: 诺 定义 宽度 */ 
text-align: right 全 右 对 齐 */} 


四 
-br {l* 隐 藏 换行 标签 ， 也 不 占据 位 置 */ 
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display: none:} 
-textfield {/* 定 义 输入 表单 控件 */ 

border: #ffF Opx solid: 

padding: 3px 8px: 

margin: 3px: 

width: 187px: 

height: 20px: 

background: url(textfield bg.gif) no-repeat; 

color: #FFOOFF:; 

font: 1.1em verdana, arial, helvetica, sans-serif 
textarea {l* 定 义 文本 域 控件 属性 */ 

border: #ffF Opx solid: 

Ppadding:4px 8px: 

margin: 3px; 

height: 150px; 

width: 190px: 

background: url(textarea_bg.gif) no-repeat:; 

color: #FFOOFF:; 

font: 1.1em verdana, arial, helvetica, sans-serif: 
.Submit {/* 定 义 按 钮 控件 属性 */ 

border: #fff Opx solid: 

margin: 6px; 

width: 80px: 

height: 20px; 

background: url(submit.gif) no-repeat: 

text-transform: uppercase; 

font: 1.1em verdana, arial, helvetica. sans-serif: 

color: #666; 


第 4 步 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预 


Wy 
见 ， 


了 


Ne 


上 清除 边框 */ 

证 增加 内 容 边 距 空隙 */ 

人 # 定义 边界 距离 */ 

证 定义 宽度 */ 

此 定义 高 度 */ 

族 定义 输入 表单 控件 背景 图 像 */ 
证 定义 表单 显示 字体 颜色 */ 

上 定义 字体 属性 */} 


让 清除 边框 */ 


族 增加 内 容 边 距 ， 避 免 内 部 文本 项 到 边框 边 */ 


族 定义 边界 距离 */ 

雍 定义 高 度 */ 

/# 定义 宽度 */ 

履 定义 文本 域 表 单 控件 背景 图 像 */ 
上 # 定义 表单 显示 字体 颜色 */ 

上 # 定义 字体 属性 */} 


上 # 清除 边框 */ 

族 定义 边界 距离 * 

/# 定义 宽度 */ 

必 定义 高 度 */ 

上 # 定义 按钮 控件 背景 图 像 */ 
/# 英文 大 写 显示 */ 

上 # 定义 字体 属性 */ 

上 # 定义 字体 颜色 */} 


效果 如 图 13.18 所 示 。 























13.18 设置 表单 背景 样式 和 


关于 背景 图 像 的 应 用 还 是 比较 灵活 的 ， 用 户 可 以 充分 发 挥 想象 力 ， 设 计 出 更 具 创意 的 表单 效果 。 


例如 ， 制 作 动态 表单 ， 先 制作 好 动态 的 gif 图 像 ， 然 后 引入 即 可 。 
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13.4 设计 表格 特殊 样式 


| 本 节 为 线 上 拓展 内 容 ， 介 绍 表格 特殊 样式 的 设计 ， 讲 解 表格 布局 效果 ， 以 及 各 种 特殊 样式 设计 


i 


13.4.1 表格 布局 特性 


表格 布局 模型 建立 在 表格 结构 模型 的 基础 之 上 ， 一 个 完整 的 表格 结构 包含 一 个 
可 选 的 标题 以 及 任意 行 的 单元 格 。 当 多 行 单 元 格 被 构建 ， 则 根据 表格 结构 模型 会 自 
动 派生 出 列 ， 每 行 中 第 1 个 单元 格 属于 第 1 列 ， 第 2 个 属于 第 2 列 ， 依 此 类 推 。 行 
和 列 可 以 在 结构 上 被 分 组 ,利用 这 个 分 组 可 以 使 用 CSS 控制 多 行 或 多 列 的 显示 样式 。 
简单 地 说 ， 表 格 结构 模型 包含 了 表格 、 标 题 、 行 、 行 组 、 列 、 列 组 和 单元 格 。 详 细 
说 明 请 扫 码 阅读 。 


13.4.2 ”定义 列 组 和 行 组 样式 


单元 格 位 于 表格 的 行 和 列 交叉 点 上 ， 根 据 表格 布局 模型 ， 单 元 格 应 从 属于 行 ， 
而 不 是 列 。 根 据 表 格 布局 模型 ， 多 个 同 列 的 单元 格 可 以 形成 一 个 列 组 。 详 细 说 明 请 扫 
码 阅读 。 





| 

当 同 时 为 <table>、<tr> 和 <td> 等 标签 定义 背景 色 、 边 框 、 字 体 属性 等 样式 时 ， 就 
容易 发 生 样式 重 营 问 题 。 根 据 表格 布局 模型 , 各 种 表格 对 象 的 样式 的 层 车 顺序 说 明 请 
扫 码 阅读 。 





13.5 在 线 练 习 


1 下面 通过 大 量 的 上 机 示例 ， 帮 助 初学 者 练习 使 用 HTMLS 设计 表格 结构 和 样式 。 
Spy 






| | 
| 国共 内 地 坟 
| 在 线 练 习 1 
| 





tr 
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使 用 CSS3 排版 网 页 


网 页 版 式 一 般 通过 栏目 的 行 、 列 组 合 来 设计 ， 根 据 网 页 效果 确定 ， 而 不 是 HTML 结构 ， 如 
单行 版 式 、 两 行 版 式 、 三 行 版 式 、 多 行 版 式 、 单 列 版 式 、 两 列 版 式 、 三 列 版 式 等 。 也 可 以 根据 
栏目 显示 性 质 进行 设计 ， 如 流动 布局 、 洗 动 布 局 、 定 位 布局 、 混 合 布局 等 。 或 者 根据 网 页 宽度 
进行 设计 ， 如 国定 宽度 、 弹 性 宽度 等 。 本 章 将 具体 讲解 CSS3 布局 的 基本 方法 。 


【 学 习 要 点 】 

WI 了 解 网 页 布局 基本 概念 

熟悉 CSS 盒 模 型 ， 

党 担 CSS 布局 基本 方法 

能 够 灵活 设计 常规 网 页 布局 效果 


怠 素 吾 


sse 从 入 门 到 精通 ( 微 课 精 编 版) 





14.1 CSS 盒 模 弄 


ED | 
| 盒 模型 是 CSS 布局 的 核心 概念 。 了 解 CSS 盒 模型 的 结构 、 用 法 ， 对 于 网 页 布局 很 重要 ， 本 节 将 
区 (2X 天 介绍 Css 盒 模型 的 构成 要 素 和 使 用 技巧 。 
回 | 


坑 14.1.1 认识 display 


在 默认 状态 下 ， 网 页 中 每 个 元 素 都 显示 为 特定 的 类 型 。 例 如 ，div 元 素 显示 为 块 状 ，span 元 素 显 
示 为 内 联 状 。 
使 用 CSS 的 display 属性 可 以 改变 元 素 的 显示 类 型 ， 用 法 如 下 : 
display:none | 
inline | block | inline-block | 
list-item | 
| table | inline-table | table-caption | table-cell | table-row | table-row-group | 
| table-column | table-column-group | table-footer-group | table-header-group | 
| run-in | 
box | inline-box | flexbox | inline-flexbox | flex | inline-flex 
| display 属性 取 值 非常 多 , 在 上 面 语 法 中 第 3、4 行 取 值 不 是 很 常用 , 第 5、6 行为 CSS3 新 增 类 型 ， 
| 详细 说 明 请 读者 阅读 CSS3 参考 手册 ， 比 较 常用 的 属性 取 值 说 明 如 下 : 
| none: 隐藏 对 象 。 与 visibility: hidden 不 同 ， 其 不 为 被 隐藏 的 对 象 保留 物理 空间 。 
inline 指定 对 象 为 内 联 元 素 。 





视频 讲解 


block: 指定 对 象 为 块 元 素 。 

回 inline-block: 指定 对 象 为 内 联 块 元 素 。 
| block 以 块 状 显示 ， 占 据 一 行 ， 一 行 只 能 够 显示 一 个 块 元 素 ， 它 适合 搭建 文档 框架 ，inline 以 内 联 
| 显示 , 可 以 并 列 显示 ,一行 可 以 显示 多 个 内 联 元 素 , 它 适合 包 刘 多 个 对 象 , 或 者 为 行内 信息 定制 样式 。 
| 如 果 设置 span 元 素 显示 为 块 状 效果 ， 只 需 定义 如 下 样式 : 


| span { display:block: } 让 定义 行内 元 素 块 状 显示 */ 
| 

| 如 果 设 置 div 以 行内 元 素 显示 ， 则 可 以 使 用 如 下 样式 进行 定义 : 

| div { display:inline: } 上 # 定义 块 状元 素 行内 显示 */ 


“14.1.2 ”认识 CSS 盒 模 型 


CSS 盒 模型 定义 了 网 页 对 象 的 基本 显示 结构 。 根 据 CSS 盒 模型 ， 网 页 中 每 个 元 素 都 显示 为 方形 ， 
从 结构 上 分 析 ， 它 包括 内 容 (content)、 填 充 (padding)、 边 框 (border)、 边 界 (margin)。CSS 盒 模 
型 基本 结构 如 图 14.1 所 示 。 

内 容 (content) 就 是 元 素 包含 的 对 象 ， 填 充 (padding) 就 是 控制 所 包含 对 象 在 元 素 中 的 显 
示 位 置 ， 边 框 (border) 就 是 元 素 的 边线 ， 边 界 (margin) 就 是 控制 当前 元 素 在 外 部 环境 中 的 显 
示 位 置 。 
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14.1 CSS 盒 模型 基本 结构 


14.1.3 ”定义 边界 


使 用 CSS 的 margin 属性 可 以 为 元 素 定 义 边 界 。 由 margin 属性 又 派生 出 4 个 子 属性 : 
回 margin-top (顶部 边界 

回 margin-right ( 右 侧 边界 ) 

回 “margin-bottom (底部 边界 ) | 
回 margin-left ( 左 侧 边界 ) | 
这 些 属性 分 别 控制 元 素 在 不 同方 位 上 与 其 他 元 素 的 间距 。 | 
【示例 1】 下 面 示例 设计 4 个 盒子 , 通过 设置 不 同方 向 上 边界 值 来 调整 它们 在 页 面 中 的 显示 位 置 ， 

如 图 14.2 所 示 。 通 过 本 例 演示 ， 用 户 能 够 体会 到 边界 可 以 自由 设置 ， 且 各 边 边界 不 会 相互 影响 。 








图 14.2 ”设置 盒子 的 边界 


| 

<style type="text/css"> | 
div {# 统一 4 个 盒子 的 默认 样式 */ | 

display: inline-block: 

height: 80px: width:80px: 启 统一 大 小 4 

border: solid 1px red: 庆 统一 边框 样式 */ 
} 
#box1 {margin-top: 10px: margin-right: gem: margin-left: 8em:} /* 第 1 个 盒子 样式 */ 
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#box2 {margin-top: 10px: margin-right: 6em: margin-left: 6em:} /* 第 2 个 盒子 样式 */ 
#box3 {margin-top: 20px: margin-right: 4em: margin-left: 4em:} /* 第 3 个 盒子 样式 */ 
#box4 {margin-top: 20px: margin-right: 2em: margin-left: 2em:} /* 第 4 个 盒子 样式 */ 
</style> 
仿 F | <div id=-"boxl"> 盒 子 1</div> 
es <div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> 
et 
安 提示 如 果 四 边 边界 相同 ， 则 直接 为 margin 定义 一 个 值 即 可 . 
如 果 四 边 边界 不 相同 ， 则 可 以 为 margin 定义 四 个 值 ， 四 个 值 用 空格 进行 分 隔 ， 代 表 边 的 
顺序 是 项 部 、 右 侧 、 底 部 和 左 侧 。 
margin:top right bottom left: 
如 果 上 下 边界 不 同 ， 左 右边 界 相同 ， 则 可 以 使 用 三 个 值 定义 : 
marginttop right bottom: 
如 果 上 下 边界 相同 ， 左 右边 界 相同 ， 则 直接 使 用 两 个 值 进行 代替 : 第 一 个 值 表示 上 下 
边界 ， 第 二 个 值 表示 左右 边界 。 
Pp{ margin:12px 24px:} 
浴 提示 : margin 可 以 取 负 值 ， 这 样 就 能 够 强迫 元 素 偏 移 原来 位 置 ， 实 现 相对 定位 功能 。 利 用 这 个 
margin 功能 ， 可 以 设计 复杂 的 页 面 布局 效果 ， 下 面 章节 会 介绍 具体 的 演示 案例 。 
| < 注意 : 流动 的 块 状元 素 存 在 上 下 边界 重 到 现象， 这 种 重 公 将 以 最 大 边界 代 蔡 最 小 边界 作为 上 下 两 
| 个 元 素 的 距离 。 


【示例 2】 下 面 示例 定义 上 面 盒子 的 底部 边界 为 50 像素 ， 下 面 盒子 的 顶部 边界 为 30 像素 ， 如 果 
| 不 考虑 重重 ， 则 上 下 元 素 的 间距 应 该 为 80 像素 ， 而 实际 距离 为 50 像素 ， 如 图 14.3 所 示 。 


| <style type="text/css"> 

| div { height: 20px: border: solid 1px red:} 
| #boxl { margin-bottom: S0px: } 

#box2 { margin-top: 30px: } 

</style> 

<div id="box1"></div> 

<div id="box2"></div> 


























[ws [RE ES KR 目 目 EFTES 
下 面 盒子 的 顶 边界 上 面 盒子 的 底 边界 


























| 图 14.3 上 下 元 素 的 重 又 现象 
| 相 邻 元 素 的 左右 边界 一 般 不 会 发 生 重 闭 。 而 对 于 行内 元 素来 说 , 上 下 边界 是 不 会 产生 任何 效果 的 。 
”对 于 浮动 元 素来 说 ， 一 般 相 邻 浮动 元 素 的 边界 也 不 会 发 生 重 赫 。 
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14.1.4 ”定义 边框 


使 用 CSS 的 border 属性 可 以 定义 边框 样式 ， 与 边界 一 样 可 以 为 各 边 定义 独立 的 边框 样式 。 
加 ”border-top〔 顶 部 边框 ) 
border-right ( 右 侧 边框 7 
border-bottom 〈 底 部 边框 ) 
回 ”borderleft 〈 左 侧 边框 ) | 
边界 的 作用 是 用 来 调整 当前 元 素 与 其 他 元 素 的 距离 , 而 边框 的 作用 就 是 划 定 当前 元 素 与 其 他 元 素 | 
之 间 的 分 隔 线 。 
边框 包括 三 个 子 属性 : border-style (边框 样式 )、border-color (边框 颜色 ) 和 border-width (边框 
宽度 )。 三 者 关系 比较 紧密 ， 如 果 没 有 定义 border-style 属性 ， 所 定义 的 border-color 和 border-width 属 
性 是 无 效 的 。 反 之 ,如果 没有 定义 border-color 和 border-width 属性 ， 定 义 border-style 也 是 没有 用 的 。 
不 同 浏览 器 为 border-width 设置 了 默认 值 (默认 为 medium 关键 字 )。medium 关键 字 等 于 2 一 3 像 | 
素 〈 视 不 同 浏览 器 而 定 )， 另 外 还 包括 thin (1 一 2 像素 ) 关键 字 和 thick (3 一 5 像素 ) 关键 字 。 
border-color 默认 值 为 黑色 。 当 为 元 素 定 义 border-style 属性 时 ， 浏 览 器 能 够 正常 显示 边框 效果 。 
border-style 属性 取 值 比较 多 ， 简 单 说 明 如 下 : 
none: 无 轮廓 。border-color 与 border-width 将 被 忽略 。 
hidden: 隐藏 边框 。IE7 及 以 下 版 本 浏览 器 尚 不 支持 。 
dotted: 点 状 轮廓 。IE6 浏览 器 中 显示 为 dashed 效果 。 
dashed: 虚线 轮廓 。 
solid: 实 线 轮廓。 
double: 双 线 轮廓 。 两 条 单线 与 其 间隔 的 和 等 于 指定 的 border-width 值 。 
groove: 3D 凹 模 轮 廓 。 
ridge: 3D 凸 槽 轮廓 。 
inset: 3D 止 边 轮 廓 。 
outset: 3D 凸 边 轮 廓 。 
示 : solid 属性 值 是 最 常用 的 ， 而 dotted、dashed 也 是 常用 样式 . double 关键 字 比 较 特殊 ， 它 定 ， 
义 边框 显示 为 双 线 , 在 外 单线 和 内 单线 之 间 有 一 定 宽度 的 距离 。 其 中 内 单线 、 外 单线 和 间 | 
距 之 和 必须 等 于 border-width 属性 值 。 
【示例 】 下 面 示例 比较 当 border-style 属性 设置 不 同 值 时 所 呈现 出 的 效果 ， 在 正 和 Firefox 浏览 | 
器 中 解析 的 效果 如 图 14.4 和 图 14.5 所 示 。 | 








加 加 加 加 图 回回 加 加 加 


注 


<style type="text/css"> | 
#1 { border-style:solid: } # 实 线 效果 */ | 
#p2 { border-style:dashed: } /# 虚线 效果 */ | 
#3 { border-style:dotted: } /# 点 线 效果 */ | 
#p4 { border-style:double: } 此 双 线 效果 */ | 
#p5 { border-style:groove: } 上 3D 凹 槽 效果 | 
#p6 { border-style:ridge: } 六 3D 凸 槽 效果 所 | 
#7 { border-style:inset: } 六 3D 四 边 效果 所 | 
#p8 { border-style:outset: } 上 #3D 凸 边 效果 */ | 
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% 
style> 


<pid="p1">#1 { border-style:solid: }</p> 
4 <p id="p2">#p2 { border-style:dashed: }</p> 
合 F | <p id="p3">#p3 { border-style:dotted: }</p> 
<pid="p4">#p4 { border-style:double: }</p> 
Note | <p id="p5">#p5 { border-style:groove: }</p> 
<pid="p6">#p6 { border-style:ridge: }</p> 
二 it"p7">fp7 {border-style:inset: }</p> 
| pid="p8">#ps { border-style:outset: }</p> 


p: 


pA (border-styledouble, | 


p5 { border-style:groove; } 





| 
| 

| 

| 

| 

| 

| 

| Wp6 { border-style:ridge; } ] 
| #p7 { border-style:inset; ) 
| 

| 

| 

| 

| 

| 





pg { border-style:outset; ) 









| 图 14.4 正 浏 览 器 中 下 边框 显示 效果 图 14.5 ”Firefox 浏览 器 中 下 边框 显示 效果 
本 加 | 
加 并 14.1.5 ”定义 补 和 白 
| 
视频 讲解 | 使 用 CSS 的 padding 属性 可 以 定义 补 白 , 它 用 来 调整 元 素 包含 的 内 容 与 元 素 边框 的 距离 。 从 功能 


| 上 讲 ， 补 白 不 会 影响 元 素 的 大 小 , 但 是 由 于 在 布局 中 补 白 同 样 占据 空间 ， 所 以 在 布局 时 应 考虑 补 白 对 
| 于 布局 的 影响 。 在 没有 明确 定义 元 素 宽度 和 高 度 的 情况 下 , 使 用 补 白 来 调整 元 素 内 容 的 显示 位 置 要 比 
| 边界 更 加 安全 、 可 靠 。 

| padding 与 margin 属性 一 样 ， 不 仅 可 以 快速 简写 ， 还 可 以 利用 padding-top、padding-right、 

| padding-bottom 和 padding-left 属性 来 分 别 定义 四 边 的 补 白 大 小 。 

| 【示例 1】 下 面 示例 设计 段落 文本 左 侧 空 出 4 个 字体 大 小 的 距离 , 此 时 由 于 没有 定义 段落 的 宽度 ， 
| 所 以 使 用 padding 属性 来 实现 会 非常 恰当 ， 如 图 14.6 所 示 。 


| <style type="text/css"> 
| 
pt{ 
border: solid 1px red: 此 边框 样式 *#/ 
padding-left: 4em: 诊 左 侧 补 白 *#/ 
} 


</style> 
<p> 今 天 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 , 但 绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。 </p> 
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今天 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 
绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 
放弃 今天 。 











图 14.6 补 白 影响 文本 在 段落 中 的 显示 位 置 


容 提示 : 由 于 补 白 不 会 发 生 重合 ， 在 元 素 没有 定义 边框 的 情况 下 ,以 padding 属性 替代 wan 
来 定义 元 素 之 间 的 距离 是 一 个 比较 不 错 的 选择 。 
由 于 行内 元 素 定义 的 width 和 height 属性 值 无 效 ， 所 以 可 以 利用 补 白 来 定义 行内 元 素 的 高 
度 和 宽度 ， 以 便 能 够 撑 开 行内 元 素 。 


【示例 2】 下 面 示例 使 用 padding 属性 定义 行内 元 素 的 显示 高 度 和 显示 宽度 ， 如 图 14.7 所 示 。 | 
没有 定义 补 白 ， 会 发 现行 内 元 素 的 背景 图 缩小 到 隐藏 状态 ， 如 图 14.8 所 示 。 


人 
background-image:url(images/back .png): 庆 定义 背景 图 */ | 
background-repeat:no-repeat: A* 禁止 背景 平 铺 */ | 
padding:51px: 庆 通过 补 白 定义 高 度 和 宽度 */ | 
line-height:0: /* 设置 行 高 为 0 */ | 
display:inline-block 庆 行内 块 显示 。*/ | 
text-indent:-999px: 上 # 隐藏 文本 */ | 

| 
| 
| 


€ | EI EYE ¢ EE Er 





图 14.7 使 用 补 白 来 定义 元 素 的 显示 高 度 和 宽度 图 14.8 没有 补 白 的 情况 下 的 显示 效果 


14.2 设计 浮动 显示 | 


浮动 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 向 左 或 向 右 停靠 显示 ， 是 在 传统 CSS 布局 中 用 来 设 
计 多 栏 并 列 版 式 的 主要 方法 ， 主 要 是 针对 块 元 素来 说 的 ， 因 为 CSS 布局 主要 使 用 块 元 素 ， 而 内 联 元 | 
素 、 内 联 块 元 素 本 身 就 可 以 实现 左右 对 齐 、 并 列 显示 。 | 


| 
| 
\ 
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14.2.1 定义 float 


使 用 CSS 的 float 属性 可 以 定义 元 素 浮动 显示 ， 用 法 如 下 所 示 : 
float:none | left | right 


默认 值 为 none， 取 值 说 明 如 下 : 

回 none: 设置 对 象 不 浮动 。 

left: 设置 对 象 浮 在 左边 。 

加 ”right: 设置 对 象 浮 在 右边 。 

| 当 该 属性 不 等 于 none 引起 对 象 浮 动 时 ， 对 象 将 被 视 作 块 对 象 ， 相 当 于 声明 了 display 属性 等 于 

| block。 也 就 是 说 ,浮动 对 象 的 display 特性 将 被 忽略 。 该 属性 可 以 被 应 用 在 非 绝 对 定位 的 任何 元 素 上 。 
【示例 1】 在 页 面 中 设计 3 个 盒子 ， 统 一 大 小 为 200x100 像素 ， 边 框 为 2 像素 宽 的 红线 。 在 默认 

| 状态 下 ， 这 3 个 盒子 以 流动 方式 堆 释 显 示 ， 根 据 HTML 结构 的 排列 顺序 自 上 而 下 进行 排列 。 如 果 定 

| 义 3 个 盒子 都 向 左 浮动 ， 则 3 个 盒子 并 列 显示 在 一 行 ， 如 图 14.9 所 示 。 





<style type="text/css"> 
width: 200px: /* 固定 宽度 */ 
height: 300px: 放 固定 高 度 */ 
border: solid 2px red: 上 # 边框 样式 */ 
margin: 4px: /# 增加 外 边界 对 

} 

div { float: left; }/* 定义 所 有 <div> 标 签 都 向 左 浮动 显示 。*/ 

</style> 

<divid-"boxlw> 盒 子 1</div> 


<div id-"box3"> 盒 子 3</div> 


如 果 不 断 缩小 窗口 宽度 , 会 发 现 随 着 窗口 宽度 的 缩小 ， 当 窗口 宽度 小 于 并 行 浮 动 元 素 的 总 宽度 之 
| 和 时 会 自动 换行 显示 ， 如 图 14.10 所 示 。 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| div {/* <div> 标 签 基 本 样式 */ 
| 
| 
ik 
| 
| 
| 
| 
| 









































图 14.9 并 列 浮动 14.10 ”错位 浮动 


| < 注意 : 当 多 个 元 素 并 列 浮动 时 ,浮动 元 素 的 位 置 是 不 固定 的 , 它们 会 根据 父 元 素 的 宽度 灵活 调整 。 
| 这 为 页 面 布 局 带 来 隐患 。 
| 解决 方法 : 定义 包含 框 的 宽度 为 固定 值 ， 避 免 包含 框 的 宽度 随 窗口 大 小 而 改变 。 例如， 以 


“298。 


第 14 章 使 用 CSS3 排版 网 页 河 


上 面 示例 为 基础 ， 如 果 定 义 body 元 素 宽度 固定 ， 此 时 会 发 现 无 论 怎么 调整 窗口 大 小 都 不 
会 出 现 浮动 元 素 错位 现象 ， 如 图 14.11 所 示 。 


body { 
width:636px: 族 固定 父 元 素 的 宽度 */ 
border:solid 1px blue: 上 # 为 父 元 素 定义 边框 ， 以 便 观察 */ 





NM 
【示例 2】 设计 3 个 盒子 以 不 同方 向 进行 浮动 , 则 它们 还 会 遵循 上 述 所 列 的 浮动 显示 原则 。 例如 ， 
定义 第 一 、 二 个 盒子 向 左 浮动 ， 第 三 个 盒子 向 右 浮动 ， 如 图 14.12 所 示 。 


#box1, #box2 { float: left: 入 向 左 浮动 */} 
#box3 { float: right: 证 向 右 浮动 */} 
























































图 14.11 不 错位 的 浮动 布局 图 14.12 浮动 方向 不 同 的 布局 效果 
如 果 取 消 定义 浮动 元 素 的 大 小 , 会 发 现 每 个 盒子 都 会 自动 收缩 到 仅 能 包含 对 象 的 大 小 。 这 说 明 浮 
动 元 素 有 自动 收缩 空间 的 功能 ， 而 块 状元 素 就 没有 这 个 特性 ， 在 没有 定义 宽度 的 情况 下 ， 宽 度 会 显示 
为 100%。 
【示例 3】 如 果 浮 动 元 素 内 部 没有 包含 内 容 ， 这 时 元 素 会 收缩 为 一 点 ， 如 图 14.13 所 示 。 但 是 对 | 
于 下 怪异 模式 来 说 ， 则 会 收缩 为 一 条 竖 线 ， 这 是 因为 正 浏览 器 有 默认 行 高 ， 如 图 14.14 所 示 。 


<style type="text/css"> | 
div{ | 
border: solid 2px red: 上 # 边框 样式 */ | 
margin: 4px: 庆 增加 外 边界 */ 
float: left: 庆 向 左 浮动 */} 


x 
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14.13 正 浏览 器 标准 模式 下 浮动 自动 收缩 为 点 。 图 14.14 正 浏览 器 怪异 模式 下 浮动 收缩 为 一 条 竖 线 
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| 净 提示 :元素 洋 动 显示 之 后 ， 它 会 必 灾 显示 顺序 和 位 置 ， 但 是 不 会 脱 高 文档 流 ， 黄 前 面 对 入 的 大 小 
和 位 置 发 生变 化 ， 也 会 影响 活动 元 素 的 显示 位 置 ， 
国内 14.2.2 使 用 clear 

| 


float 元 素 能 够 并 列 在 一 行 显示 , 除了 可 以 通过 调整 包含 框 的 宽度 来 强迫 浮动 元 素 换行 显示 外 , 还 
| 可 以 使 用 clear 属性 ， 该 属性 能 够 强迫 浮动 元 素 换行 显示 ， 用 法 如 下 所 示 : 


国 汇 基 3 加 | 
a clear: none | left | right | both 

国生 人 默认 值 为 none， 取 值 说 明 如 下 : 

视频 讲解 回 ”none: 允许 两 边 都 可 以 有 浮动 对 象 。 


left， 不 允许 左边 有 浮动 对 象 。 

回 right， 不 允许 右边 有 浮动 对 象 。 

both: 不 允许 有 浮动 对 象 。 

【示例 1】 下 面 示例 定义 3 个 盒子 都 向 左 浮动 ， 然 后 定义 第 二 个 盒子 清除 左 侧 浮动 ， 这 样 它 就 不 


| 能 够 排列 在 第 一 个 盒子 的 右 侧 ， 而 是 换行 显示 在 第 一 盒子 的 下 方 ， 但 是 第 三 个 盒子 由 于 没有 设置 清除 
| 属性 ， 所 以 它 会 向 上 浮动 到 第 一 个 盒子 的 右 侧 ， 如 图 14.15 所 示 。 

| <style type="text/css"> 

| vt 

| width: 200px: /# 固定 宽度 */ 

| height: 200px; 诺 固定 高 度 *#/ 

| border: solid 2px Ted: /# 边框 样式 */ 

| margin: 4px; 店 边界 距离 */ 

| float: left: /#* 向 左 浮动 */} 

| #box2 { clear: left: } 片 清除 向 左 浮动 */ 
| </style> 

| <div id="boxl"> 盒 子 1</div> 

| <div id-"box2"> 盒 子 2</div> 


<div id="box3"> 盒 子 3</div> 


如 果 定 义 第 二 个 盒子 清除 右 侧 浮动 ， 会 发 现 它们 依然 显示 在 一 行 ， 如 图 14.16 所 示 。 说 明 在 第 二 
盒子 浮动 显示 时 不 会 受到 clear 影响 。 


















































图 14.15 ”为 第 二 个 盒子 定义 清除 左 侧 浮 动 对 象 图 14.16 为 第 二 个 盒子 定义 清除 右 侧 浮动 对 象 
【示例 2】clear 不 仅 影响 浮动 元 素 ， 还 对 块 元 素 产生 影响 。 例 如 ， 禁 止 块 状元 素 与 浮动 元 素 重合 
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显示 ， 可 以 使 用 如 下 样式 为 浮动 元 素 后 面 的 块 元 素 定义 clear 属性 ， 如 图 14.17 所 示 。 


<style type="text/css"> 

div{ 
width: 200px: 上 # 固定 宽度 所 
height 200px: 入 固定 高 度 */ 
border: solid 2px red: 让 边框 样式 */ 
margin: 4px; /# 边界 距离 */ 
float: left: 上 # 向 左 浮动 */ 

} 

#box3 {/* 清除 第 三 个 盒子 浮动 显示 ， 同 时 定义 左 侧 不 要 有 浮动 元 素 */ 
float: none: 证 禁止 浮动 *#/ 
clear: left: /# 清除 左 侧 浮动 */ 

} 

</style> 

<div id="box1"> 盒 子 1</div> 

<div id="box2"> 盒 子 2</div> 

<divid-"box3"> 盒 子 3<div> 
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为 盒子 3 定义 “clear left:” 不 为 盒子 3 定义 “clear: left:” 
14.17 清除 块 元 素 左 侧 浮动 对 象 


【示例 3】 在 正 浏览 器 怪异 模式 下 ， 使 用 clear 还 可 以 禁止 文本 环绕 版 式 。 例 如 ， 在 下 面 的 图 文 混 
排版 式 中 , 为 文本 信息 标签 <span> 定 义 “clear: left ” 样式， 可 以 看 到 文本 被 迫 换行 显示 ,效果 如 图 14.18 
所 示 。 


<style type="text/css"> 
#box img { 
float: left: 上 # 让 图 像 向 左 浮动 */ 
width: 300px:} 
#box span { clear: left: } 让 清除 左 侧 浮动 对 象 */ 
</style> 
<div id="box"> <img src="images/1.png" alt=""/><span> 棱 镜 事件 的 主角 斯 诺 登 透露 的 资料 显示 ， 众 多 科技 公 
司 曾 与 美国 政府 合作 ,帮助 美国 国家 安全 局 获得 互联 网 上 的 加 密 文件 数据 .由 于 操作 系统 关系 到 国家 的 信息 安全 ， 
目前 俄罗斯 、 德 国 等 国家 已 经 推行 在 政府 部 门 的 电脑 中 采用 本 国 的 操作 系统 软件 。Windows 8 和 Vista 是 同类 架 
构 ， 而 且 Windows 8 还 捆绑 了 微软 的 杀毒 软件 ， 它 时 时 刻 刻 都 在 检查 用 户 电脑 ， 扫 描 数 据 信息 。</span></div> 
</div> 
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正 浏 览 器 怪异 模式 下 效果 正 浏览 器 标准 模式 下 效果 
图 14.18 下 浏览 器 怪异 模式 支持 的 非 浮 动 对 象 清除 特性 


14.3 设计 定位 显示 


定义 也 是 一 种 特殊 的 显示 方式 ， 它 能 够 让 元 素 脱 离 文 档 流 ， 实 现 相对 偏 移 ， 或 者 精准 显示 。 
14.3.1 定义 position 


使 用 CSS 的 position 属性 可 以 定义 元 素 定 位 显示 ， 用 法 如 下 所 示 : 

position: static | relative | absolute | fixed 

默认 值 为 static， 取 值 说 明 如 下 所 示 : 

回 static:， 无 特殊 定位 ， 对 象 遵循 正常 文档 流 。top、right、bottom、left 等 属性 不 会 被 应 用 。 

relative: 对 象 遵循 正常 文档 流 ， 但 将 依据 top、right、bottom、left 等 属性 在 正常 文档 流 中 偏 
移 位 置 。 

absolute: 对 象 脱离 正常 文档 流 ， 使 用 top、right、bottom、left 等 属性 进行 绝对 定位 ， 其 层 

簿 顺序 通过 z-index 属性 定义 。 

| fixed: 对 象 脱离 正常 文档 流 ， 使 用 top、right、bottom、left 等 属性 以 窗口 为 参考 点 进行 定位 ， 

| 当 出 现 滚动 条 时 ， 对 象 不 会 随 之 滚动 。 

| 与 position 属性 相关 联 的 是 4 个 定位 属性 : 

| top: 设置 对 象 与 其 最 近 一 个 定位 包含 框 项 部 相关 的 位 置 。 

| right: 设置 对 象 与 其 最 近 一 个 定位 包含 框 右边 相关 的 位 置 。 

bottom: 设置 对 象 与 其 最 近 一 个 定位 包含 框 底 部 相关 的 位 置 。 

| 

| 

| 

| 





加 


left: 设置 对 象 与 其 最 近 一 个 定位 包含 框 左 侧 相关 的 位 置 。 
上 面 4 个 属性 值 可 以 是 长 度 值 ， 或 者 是 百分比 值 ， 可 以 为 正 值 ， 也 可 以 为 负 值 。 当 取 负 值 时 ， 向 
相反 方向 偏 移 ， 默 认 值 都 为 auto。 
| 【示例 1】 下 面 示例 定义 3 个 盒子 都 为 绝对 定位 显示 ， 并 使 用 left、right、top 和 bottom 属性 定义 
| 元 素 的 坐标 ， 显 示 效 果 如 图 14.19 所 示 。 
| EECS 
| ee 0: /# 兼 容 非 正 浏览 器 */margin: 0: /* 兼 容 正 浏览 器 */} /* 清除 页 边 距 */ 
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外 A 国定 元 素 的 宽度 */ | 
height: 100px: 片 固定 元 素 的 高 度 */ 
border: solid 2px red: 让 边框 样式 */ 
position: absolute: 上 语 绝对 定位 */ 
1 
#boxl { 
left: 50px: 证 距离 左 侧 窗 口 距离 50 像素 */ 
top: 50px: /# 距离 顶部 窗口 距离 50 像素 */ | 
} | 
#box2 { left: 40%: } /* 距离 左 侧 窗口 距离 为 窗口 宽度 的 4096 */ 
#box3 { | 
Tight 50px: 必 距离 右 侧 距离 50 像素 */ 
bottom: 50px: 庆 距离 底部 距离 50 像素 */ | 
| 
</style> | 
<div id-"boxl"> 盒 子 1</div> | 
<div id="box2"> 盒 子 2</div> | 
<div id-"box3"> 盒 子 3</div> | 
| 
| 
EF | 
| 
| 
| 
庄子 3 | 














图 14.19 相对 于 窗口 定位 元 素 


< 所 注 意 : 在 定位 布局 中 ， 有 一 个 很 重要 的 概念 : 定位 包含 框 。 定 位 包含 框 不 同 于 结构 包含 框 ， 它 定 | 

义 了 所 包含 的 绝对 定位 元 素 的 坐标 参考 对 象 。 凡 是 被 定义 相对 定位 、 绝 对 定位 或 国定 定位 | 

的 元 素 都 会 拥有 定位 包含 框 的 功能 。 如 果 没 有 明确 指定 定位 包含 框 ， 则 将 以 body 作为 定 | 

位 包含 框 ， 即 以 窗口 四 边 为 定位 参照 系 。 | 

【示例 2】 在 上 面 示例 基础 上 , 把 第 二 、 第 三 个 盒子 包 庄 在 <div id="wrap"> 标 签 中, 然后 定义 <div | 

id="wrap"> 标 签 相对 定位 (position:relative;)， 于 是 它 就 拥有 了 定位 包含 框 的 功能 ， 此 时 第 二 、 第 三 个 
盒子 就 以 <div id="wrap"> 四 边 作 为 参考 系统 进行 定位 ， 效 果 如 图 14.20 所 示 。 


<style type="text/css"> 

body {padding: 0: /* 兼 容 非 正 浏览 器 */margin: 0: /* 兼 容 正 浏览 器 */} /* 清除 页 边 距 */ | 

div{ | 
width: 200px: 上 # 固定 元 素 的 宽度 */ | 
height: 100px: 让 固定 元 素 的 高 度 */ | 
border solid 2px red: 庆 边框 样式 */ | 
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| position: absolute; 上 # 绝对 定位 *#/ 
| } 
| #box] { 
| left: 50px: 片 距离 左 侧 窗口 距离 50 像素 */ 
优 站 | top: 50px: 广 距离 顶部 窗口 距离 50 像素 */ 
Sa | } 
#box2 { left: 40%; } 让 距离 左 侧 窗口 距离 为 窗口 宽度 的 40% */ 
#box3 { 
| right: 50px: /* 距离 右 侧 距离 50 像素 */ 
| bottom: S0px: 上 庆 距离 底部 距离 50 像素 */ 
| } 
| #wrap {/* 定义 定位 包含 框 */ 
| ‘width:300px: 必 定义 定位 包含 框 的 宽度 */ 
| height:200px: 上 定义 定位 包含 框 的 高 度 *#/ 
| float:right: 人 定义 定位 包含 框 向 右 浮动 */ 
| margin:100px: 证 包含 块 的 外 边界 */ 
| border:solid 1px blue; 诺 边框 样式 */ 
position:relative; 店 相对 定位 */ 
} 
</style> 
<div id="boxl"> 盒 子 1</div> 
<div id="wrap"> 
<div id="box2"> 盒 子 2</div> 
<div id="box3"> 盒 子 3</div> 


Po|e ns 





| 
| 
| 
| 
| </div> 
| 
| 
| 
| 
| 


























图 14.20 相对 于 元 素 进行 定位 
| 相对 定位 定义 元 素 在 文档 流 中 原始 位 置 进行 偏 移 , 但 是 定位 元 素 不 会 脱离 文档 。 而 对 于 绝对 定位 
| 对 象 来 说 ， 定 位 元 素 完全 脱离 文档 流 ， 两 者 就 不 再 相互 影响 。 
| 使 用 相对 定位 可 以 纠正 元 素 在 流动 显示 中 的 位 置 偏差 ， 以 实现 更 恰当 的 显示 。 
| 【示例 3】 在 下 面 示例 中 ， 根 据 文档 流 的 正常 分 布 规律 ， 第 一 、 第 二 、 第 三 个 盒子 按 顺 序 从 上 到 
| 下 进行 分 布 ， 下 面 设计 第 一 个 盒子 与 第 二 个 盒子 的 显示 位 置 进行 调换 ,为 此 使 用 相对 定位 调整 它们 的 
| 显示 位 置 ， 实 现 的 代码 如 下 ， 所 得 的 效果 如 图 14.21 所 示 。 
| <style type="text/css"> 
vt 
width: 400px: 让 固定 宽度 显示 */ 
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height: 100px: /* 固定 高 度 显示 */ 

border: solid 2px red: 让 边框 样式 */ 

margin: 4pX: 上 # 外 边界 距离 */ 

了 position: relative: 诊 相对 定位 */} 
#boxl { top: 108px: } 刻 向 下 偏 移 显示 位 置 */ 
#box2 { top: -108px: } 庆 向 上 偏 移 显示 位 置 */ 
</style> 
<div id-"boxl"> 盒 子 1</div> | 
<div id-"box2"> 盒 子 2</div> | 
<div id="box3'> 盒 子 3</div> | 
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默认 显示 位 置 对 倒 之 后 显示 位 置 | 

| 

14.21 使 用 相对 定位 调换 模块 的 显示 位 置 | 

相对 定位 更 多 地 被 用 来 当 作 定位 包含 框 ， 因 为 它 不 会 脱离 文档 流 。 另外， 使 用 相对 定位 可 以 很 方 | 

便 地 微调 文档 流 中 对 象 的 位 置 偏差 。 | 
固定 定位 就 是 定位 坐标 系统 始终 是 固定 的 ， 即 始终 以 浏览 器 窗口 边界 为 参照 物 进行 定位 。 | 
【示例 4】 下 面 示 例 是 对 上 面包 含 块 演示 示例 的 修改 ， 修 改 其 中 的 3 个 盒子 的 定位 方式 为 固定 定 | 

位 ， 这 时 在 浏览 器 中 预览 ， 你 会 发 现 包含 块 不 再 有 效 ， 固 定 定位 的 3 个 盒子 分 别 根据 窗口 来 定位 自己 | 
的 位 置 ， 如 图 14.22 所 示 。 | 


<style type="text/css"> 
div{ 
width: 200px: 谍 固定 元 素 的 宽度 */ | 
height: 100px: 诈 固定 元 素 的 高 度 */ | 
border: solid 2px ed: 庆 边框 样式 */ | 
position: fixed: 人 # 固定 定位 */} | 
#boxl { | 
left: 50px: 人 * 距离 左 侧 窗口 50 像素 */ | 
top: SOpx: /#* 距离 顶部 窗口 距离 50 像素 */ | 
} | 
#box2 { left: 40%: } 记 距离 左 侧 窗口 距离 为 窗口 宽度 的 40% */ | 
#box3 { | 
Tight: 50px: 上 # 距离 右 侧 距 离 50 像素 */ 
bottom: S0px: 庆 距离 底部 距离 50 像素 */ 


| 
} | 
#wrap {/* 定义 定位 包含 框 */ | 
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| width: 300px: 庆 定义 定位 包含 框 的 宽度 */ 

| height: 200px: 证 定义 定位 包含 框 的 高 度 */ 

| float: right: 上 定义 定位 包含 框 向 右 浮动 */ 

Fo margin: 100px: 片 包含 块 的 外 边界 */ 
全 内 border: solid lpx blue: /* 边框 样式 */ 
| position: relative:; 上 相对 定位 */} 
Nte | 

| <div id="boxl"> 盒 子 1</div> 

| <divi 示 "wrap> 

| <div id="box2"> 盒 子 2</div> 

| <div id="box3"> 盒 子 3</div> 

</div> 














图 14.22 固定 定位 效果 
疙 提示: 在 定位 布局 中 ， 如 果 left 和 right、top 和 bottom 同时 被 定义 ， 则 left 优 于 right，top 优 于 
bottom。 但 是 如 果 元 素 没有 被 定义 宽度 和 高 度 ， 则 元 素 将 会 被 拉 伸 以 适应 左右 或 上 下 同时 
定位 。 


| 【示例 5】 在 下 面 示例 中 ,分别 为 绝对 定位 元 素 定义 left、right、top 和 bottom 属性 ， 则 元 素 会 被 
| 自动 拉 伸 以 适应 这 种 四 边 定位 的 需要 ， 演 示 效 果 如 图 14.23 所 示 。 


| 
| 
| 
| <style type="text/css"> 
| #boxl { 
| border: solid 2px red: 上 # 边框 样式 */ 
| position: absolute: 上 # 绝对 定位 */ 
| left: S0px: /# 左 侧 距 离 */ 
| Tight: S0px: 上 证 右 侧 距离 */ 
| top: SOpx: 让 顶部 距离 */ 
bottom: 50px: 上 # 底部 距离 */} 
</style> 
<div id= "boxl"> 盒 子 1</div> 
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图 14.23 “四边 同时 定位 元 素 的 位 置 
14.3.2 ”设置 层 又 顺序 


不 管 是 相对 定位 、 固 定 定位 ， 还 是 绝对 定位 ， 只 要 坐标 相同 都 可 能 存在 元 素 重 基 现象。 在 默认 情 | 如 旨 讲 各 
况 下 ， 相 同类 型 的 定位 元 素 ， 排 列 在 后 面 的 定位 元 素 会 覆盖 前 面 的 定位 元 素 。 | 

【示例 1】 在 下 面 示例 中 ，3 个 盒子 都 是 相对 定位 ， 在 默认 状态 下 它们 将 按 顺序 覆盖 显示 ， 如 
图 14.24 所 示 。 





| 
| 
<style type="text/css"> | 
div{ | 
width: 200px: /# 固定 宽度 */ | 
height: 100px: 放 固定 高 度 */ | 
border: solid 2px red: 上 # 边框 样式 */ | 
position: relative; 上 # 相对 定位 */} | 
#boxl { background: red: } /# 第 一 个 盒子 红色 背景 */ | 
#box2 {/* 第 二 个 盒子 样式 */ | 
left: 60px: 片 左 侧 距离 */ | 
top: -50px: 族 顶部 距离 */ | 
:blue: 和 * 蓝 色 背 景 */} | 
#0x3 {/* 第 三 个 盒子 样式 */ | 
left 120px: 族 左 侧 距离 */ | 
top: -100px: 让 顶部 距离 */ 
background: green: 人 # 绿色 背景 */} 
< 
<div id-"boxl'> 盒 子 1</div> | 
<div id-"box2w> 盒 子 2</div> | 
<div id="box3"> 盒 子 3</div> | 


使 用 CSS 的 z-index 属性 可 以 改变 定位 元 素 的 覆盖 顺序 。z-index 属性 取 值 为 整数 ， 数值 直 大 就 起 
显示 在 上 面 。 
【示例 2】 在 上 面 示 例 基础 上 ， 分 别 为 3 个 盒子 定义 z-index 属性 值 ， 第 一 个 盒子 的 值 最 大 ， 所 | 
以 它 就 层 合 在 最 上 面 ， 而 第 三 个 盒子 的 值 最 小 ， 所 以 被 苹 放 在 最 下 面 ， 如 图 14.25 所 示 。 
#boxl] {z-index:3; } 
#box2 { z-index:2; } 
#box3 {z-index:1: } 
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图 14.24 默认 层 秋 顺序 图 14.25 改变 层 肥 顺序 


如 果 z-index 属性 值 为 负 值 ， 则 将 隐藏 在 文档 流 的 下 面 。 
【示例 3】 在 下 面 示 例 中 , 定义 <div> 标 签 相 对 定位 , 并 设置 z-index 属性 值 为 -1， 显 示 效 果 如 图 14.26 


| 所 示 。 

| <style type="text/css"> 

| #boxl { 

| height: 400px: 上 # 固定 高 度 */ 

| position: relative:; 启 相对 定位 */ 

| background: red url(images/1 jpe): 人 * 定义 背景 色 和 背景 图 */ 

| Z-index: -1: 谍 层 从 顺序 */ 

| top: -120px: 证 偏 移 位 置 ， 实 现 与 文本 */} 
| sale 


| <p> 我 永远 相信 只 要 永 不 放弃 ， 我 们 还 是 有 机 会 的 。 最 后 ， 我 们 还 是 坚信 一 点 ， 这 世界 上 只 要 有 梦想 ， 只 要 
| 不断 努 力 ， 只 要 不 断 学 习 ， 不 管 你 长 得 如 何 ， 不 管 是 这 样 ， 还 是 那样 ， 男 人 的 长 相 往 往 和 他 的 才华 成 反比 。 今 天 
， 很 残酷 ， 明 天 更 残酷 ， 后 天 很 美好 ， 但 绝 大 部 分 是 死 在 明天 晚上 ， 所 以 每 个 人 不 要 放弃 今天 。</p> 

| divid="boxl"></div> 
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图 14.26 ”定义 定位 元 素 显示 在 文档 流下 面 


14.4 案例 实战 


CSS 布局 比较 复杂 ,为 了 帮助 用 户 快速 入 门 ， 本 节 通 过 几 个 案例 介绍 网 页 布局 的 基本 思路 、 方法 
和 技巧 。 当 然 ， 要 设计 精美 的 网 页 ， 不 仅仅 需要 技术 ， 更 需要 一 定 的 审美 和 艺术 功底 。 
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14.4.1 设计 两 栏 页 面 


本 案例 版 式 设计 导航 栏 与 其 他 栏目 并 为 一 列 固定 在 右 侧 ， 主 栏目 以 弹性 方式 显示 在 左 侧 ， 实 现 主 
栏 自 适应 页 面 宽度 变化 ， 而 侧 栏 宽度 固定 不 变 的 版 式 效果 ， 结 构 设 计 如 图 14.27 所 示 。 


i id="container"> 














记 ago | | 
| 
| | (%) | 
| sxe | 
已 ” 页 肚 区 域 (%) | (%) 





</div> 


图 14.27 版 式 结构 示意 图 


【设计 思路 】 
Sd 侧 栏 固定 的 版 式 是 存在 很 大 难度 的 ， 因为 百分比 取 值 | 
是 一 个 不 固定 的 宽度 ， 让 一 个 不 固定 宽度 的 栏目 与 一 个 固定 宽度 的 栏目 同时 浮动 在 一 行内 ， 采 用 简单 | 
的 方法 是 不 行 的 。 
这 里 设计 主 栏 100% 宽 度 ， 然 后 通过 左 外 边 距 取 负 值 强迫 栏目 偏 移出 一 列 的 空间 ， 最 后 把 这 个 腾 | 
出 的 区 域 让 给 右 侧 浮动 的 侧 栏 ， 从 而 达到 并 列 浮动 显示 的 目的 。 | 
当主 栏 左 外 边 距 取 负 值 时 , 可 能 部 分 栏目 内 容 显示 在 窗口 外 面 ， 为 此 在 堪 套 的 子 元 素 中 设置 左 外 | 
边 距 为 父 包含 框 的 左 外 边 距 的 负 值 ， 这 样 就 可 以 把 主 栏 内 容 控制 在 浏览 器 的 显示 区 域 。 | 
【操作 步骤 】 
第 1 步 ， 新 建文 档 ， 保 存 为 testhtml。 
第 2 步 ， 设 计 文档 基本 结构 ， 包 含 5 个 模块 。 
<div id="container"> 
<div id="header"> 
<h1> 页 眉 区 域 <hl> 
</div> 
<div id="wrapper"> 
<div id="content"> 
<p><strong>1. 主 体内 容 区 域 </strong></p> 
</div> 
</div> 
<div id="navigation"> 
<p><strong>2. 导 航 栏 </strong></p> 
</div> 
<div id="extra"> 
<p><strong>3. 其 他 栏目 </strong></p> 
</div> 
<div id="footer"> 
<p> 页 脚 区 域 <p> 
</div> 
</div> 
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第 3 步 ， 使 用 <style> 定 义 内 部 样式 表 ， 输 入 下 面 样式 代码 ， 设 计 效 果 如 图 14.28 所 示 。 
div#wrapper {/* 主 栏 外 框 */ 


float:left: 庆 向 左 浮动 */ 
全 办 | width:10096: 证 弹性 宽度 *#/ 
RN | margin-left:-200px 语 左 侧 外 边 距 ， 负 值 向 左 缩 进 */ 
} 
div#content {l* 主 栏 内 框 */ 
| margin-left:200px 上 # 左 侧 外 边 距 ， 正 值 填充 缩 进 */ 
| 
| div#navigation {/* 导航 栏 */ 
| float:right: 人 # 向 右 浮动 *#/ 
| width:200px 让 固定 宽度 */ 
| 
| } 
| div#extra {/* 其 他 栏 */ 
| float:right: 上 # 向 右 浮动 */ 
| clear:right: 人 # 清除 右 侧 浮动 ， 避 免 同 行 显示 */ 
width:200px /# 固定 宽度 */ 
} 
div#footer {/* 页 眉 区 域 */ 
clearboth: 证 清除 两 侧 浮动 ， 强 迫 外 框 撑 起 */ 
width:100% Lk 1 dh 





图 14.28 设计 固 宽 + 自 适应 两 栏 页 面 


14.4.2 设计 三 栏 页 面 


本 案例 的 基本 思路 : 首先 定义 主 栏 外 包含 框 宽度 为 100%， 即 占据 整个 窗口 。 然 后 再 通过 左右 外 
| 边 距 来 定义 两 侧 空白 区 域 ， 预 留 给 侧 栏 占用 。 在 设计 外 边 距 时 ， 一 侧 采 用 百分比 单位 ， 另 一 侧 采用 像 
| 素 为 单位 ， 这 样 就 可 以 设计 出 两 列 宽 度 是 弹性 的 ， 另 一 列 是 固定 的 。 最 后 再 通过 负 外 边 距 来 定位 侧 栏 
| 的 显示 位 置 ， 设 计 效果 如 图 14.29 所 示 。 
| diwfwrapper {/* 主 栏 外 包含 框 基本 样式 */ 

float:left: 诺 向 左 浮动 */ 

width:100% /# 百分比 宽度 *#/ 
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div#content {/* 主 栏 内 包含 框 基本 样式 */ 





margin: 0 33% 0 200px /# 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
) 
divfnavigation {/* 导航 栏 包含 框 基本 样式 */ 
floatleft: /* 向 左 浮动 */ 
Width:200px: 语 固定 宽度 *#/ 
margin-left:-100% /* 左 外 边 距 取 负 值 进行 精确 定位 */ 
} | 
divffextra {/* 其 他 栏 包含 框 基本 样式 */ | 
float:left: 人 * 向 左 浮动 */ | 
width:33%; 放 百分比 宽度 */ | 
margin-left:-33% /* 左 外 边 距 取 负 值 进行 精确 定位 */} 


页 周 区 域 
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图 14.29 设计 两 列 弹性 、 一 列 固定 版 式 的 布局 效果 

也 可 以 让 主 栏 取 负 外 边 距 进行 定位 ， 其 他 栏 自然 浮动 。 例 如 ， 修 改 其 中 的 核心 代码 ， 让 主 栏 外 包 | 

含 框 向 左 取 负 值 偏 移 25% 的 宽度 ， 也 就 是 隐藏 主 栏 外 框 左 侧 25% 的 宽度 ， 然 后 通过 内 框 来 调整 包含 | 

内 容 的 显示 位 置 ， 使 其 显示 在 窗口 内 ， 最 后 定义 导航 栏 列 左 外 边 距 取 负 值 覆盖 在 主 栏 的 右 侧 外 边 距 区 | 

域 上 ， 其 他 栏目 自然 浮动 在 主 栏 右 侧 即 可 ， 核 心 代码 如 下 : 
div#wrapper {/* 主 栏 外 包含 框 基本 样式 */ 


margin-left:-25% 上 # 左 外 边 距 取 负 值 进行 精确 定位 */ 
} 
div#content {/* 主 栏 内 包含 框 基本 样式 */ 

margin: 0 200px 0 25% 上 # 定义 左右 两 侧 外 边 距 ， 注 意 不 同 的 取 值 单位 */ 
} 
div#navigation {/* 导航 栏 包含 框 基本 样式 */ 

margin-left:-200px 让 左 外 边 距 取 负 值 进行 精确 定位 */ 


} 
div#extra {/* 其 他 栏 包含 框 基本 样式 */ 
width:25% 此 百分比 宽度 所 


设计 效果 如 图 14.30 所 示 ， 其 中 中 间 导 航 栏 的 宽度 是 固定 ， 主 栏 和 其 他 栏 为 弹性 宽度 显示 。 
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图 14.30 设计 两 列 弹 性 、 一 列 固定 版 式 的 布局 效果 


14.4.3 ”设计 居中 网 页 


文本 居中 可 以 使 用 “text-align:center;” 声 明 来 实现 ， 但 是 对 于 网 页 设计 来 说 ， 实 现 居 中 显示 就 需 
要 一 点 技巧 。 设 计 方 法 : 通过 text-align 和 margin 属性 配合 使 用 实现 居中 。 


【操作 步骤 】 


第 1 步 ， 启 动 Dreamweaver， 新 建 网 页 ， 保 存 为 ndex.html， 在 <body> 标 签 内 输入 以 下 代码 ， 设 


计 网 页 包含 框 。 


<div id="wrap"> 网 页 外 套 </div> 
第 2 步 ， 在 <head> 标 签 内 添加 <style type="text/ess"> 标 签 ， 定 义 一 个 内 部 样式 表 ， 然 后 输入 下 面 


样式 。 


body { text-align:center: } 
#wrap {/* 网 页 外 套 的 样式 */ 


人 # 网 页 居中 显示 (IE 浏览 器 有 效 ) */ 


上 # 左 侧 边界 自动 显示 */ 

族 右 侧 边界 自动 显示 */ 

族 网 页 正文 文本 居 左 显示 */ 

上 # 定义 边框 ， 方 便 观 察 ， 可 以 不 定义 */ 

让 固定 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */ 














14.31 设计 网 页 居中 显示 的 基本 方法 
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窟 提示 : 设计 网 页 居中 布局 时 ， 应 注意 两 个 问题 : | 
第 一 ， 不 同 浏览 器 对 于 布局 居中 的 支持 是 不 同 的 。 例如 ， 对 于 但 浏览 器 来 说 ， 如 果 要 设 | 
计 网 页 居中 显示 ， 则 可 以 为 包含 框 定义 “text-align:center;” 声 明 ， 而 非 下 浏览 器 不 支持 
该 种 功能 .如 果 能 够 实现 兼容 ,只 有 使 用 margin 属性 ,同时 设置 左右 两 侧 边 界 为 自动 (anto) 


即 可 。 | 
第 二 ， 要 实现 网 页 居中 显示 。 就 应 该 为 网 页 定义 宽度 ， 且 宽度 不 能 为 100%， 否 则 就 看 不 


到 居中 显示 的 效果 。 


【示例 2】 上述 网 页 居中 设计 技巧 适合 普通 网 页 。 但 是 ， 如 果 设 计 网 页 浮动 显示 ， 则 居中 样式 就 | 
失去 效果 。 例 如 ， 在 上 面 示例 基础 上 ， 如 果 再 为 <div id="wrap"> 包 含 框 添加 浮动 样式 。 
#wrap {float:left; }/* 包含 框 浮动 显示 */ 


网 页 显示 效果 如 图 14.32 所 示 。 





14.32 ”网 页 居中 失效 


解决 方法 如 下 : 
在 网 页 包含 框 内 再 衷 一 层 包 含 框 ， 设 计 外 套 流动 显示 ， 内 套 浮 动 显示 。 有 具体 代码 如 下 所 示 ， 预 览 
效果 如 图 14.33 所 示 。 








14.33 ”让 浮动 页 面 居中 显示 


<style type="text/css"> 
body { text-align: center: } 上/# 网 页 居中 显示 ( 正 浏览 器 有 效 ) */ 
#wrap {/* 网 页 外 套 的 样式 */ 
margin-left: auto: 放 左 侧 边界 自动 显示 */ 
margin-right: auto: 片 右 侧 边界 自动 显示 */ 
text-align: left: # 网 页 正文 文本 居 左 显示 */ | 
border: solid 1px red: 此 定义 边框 ， 方 便 观察 ， 可 以 不 定义 */ | 
width: 8096: 上 # 弹性 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 */} | 
#subwrap {/* 网 页 内 套 的 样式 */ | 
width: 100%:; 雍 显 式 定义 100% 宽 度 ， 以 便 与 外 套 同 宽 */ | 
float: left: 入 浮动 显示 */} | 
</style> | 
人 
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<div id="subwrap"> 网 页 内 套 </div> 
</div> 
【示例 3】 浮 动 页 面 能 够 居中 显示 ， 那 么 定位 页 面 如 何 实现 居中 显示 ? 
国内 定位 布局 相对 复杂 , 要 实现 居中 显示 , 也 可 以 借助 内 外 两 个 包含 杠 来 实现 , 设计 外 框 为 相对 定位 ， 
”内 框 为 绝对 定位 显示 。 这 样 内 框 将 根据 外 框 进行 定位 ， 由 于 外 框 为 相对 定位 ,将 遵循 流动 布局 的 特征 
进行 布局 。 完 整 页 面 设计 代码 如 下 所 示 ， 显 示 效果 如 图 14.34 所 示 。 


| <style type="text/css"> 
| body { text-align:center: } 证 网 页 居中 显示 〈IE 浏览 器 有 效 )*/ 
#wrap {/* 网 页 外 套 的 样式 */ 
| margin-left:auto; 证 左 侧 边界 自动 显示 */ 
| margin-right:auto: 店 右 侧 边界 自动 显示 */ 
| text-align:left: /* 网 页 正文 文本 居 左 显示 */ 
| border:solid 1px red: 店 定义 边框 ， 方 便 观察 ， 可 以 不 定义 */ 
| width:80%; 店 弹性 宽度 ， 只 有 这 样 才 可 以 实现 居中 显示 效果 所 
| position:relative: 庆 定义 网 页 外 框 相对 定位 ， 设 计 包含 块 */ 
} 
#subwrap {/* 网 页 内 套 样 式 */ 
width:100%; 证 与 外 套 同 宽 */ 
position:absolute: 谍 绝对 定位 */ 





| 图 14.34 设计 定位 网 页 居中 显示 
| 

| 14.4.4 ”设计 定位 页 面 

| 


定位 布局 存在 自身 的 优势 和 缺陷 ， 优 点 是 比较 精确 ， 缺 点 是 无 法 适 
应 网 页 内 容 的 变化 而 自动 调整 自身 区 域 大 小 。 很 多 设计 师 一 般 不 喜欢 使 用 
绝对 定位 布局 ， 仅 把 它 作为 一 种 小 技巧 用 在 页 面 局 部 细节 设计 中 。 不 过 适 
当 使 用 定位 布局 ， 也 能 轻松 应 对 复杂 的 定位 问题 。 

本 节 将 通过 一 个 示例 讲解 定位 布局 的 实战 应 用 技巧 。 这 里 尝试 使 用 
定位 法 设计 三 行 三 列 版 布局 页 面 。 如 果 读 者 感 兴趣 ， 可 以 扫 码 阅读 。 


| 14.4.5 设计 伪 列 页 面 





| 在 设计 多 栏 页 面 中 ， 由 于 每 个 栏目 高 度 不 一 致 ， 栏 目 内 容 都 是 动态 显示 ， 无 法 预先 定义 。 这 样 
| 就 不 可 避免 地 出 现 栏目 高 度 参差 不 齐 的 现象 。 那 么 如 何 让 各 个 栏目 的 高 度 都 保持 一 致 呢 ? 
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刷 放 


本 节 介 绍 两 种 方法 ， 如 果 读者 感 兴趣 ， 可 以 扫 码 阅读 。 


14.4.6 ”设计 浮动 页 面 


浮动 布局 受 HTML 原始 结构 的 影响 很 大 。 例如， 在 上 节 示 例 中 ， 如 
果 把 次 要 信息 列 放置 到 页 面 左 侧 显 示 是 非常 困难 的 。 传 统 方法 是 为 主要 





信息 列 和 次 要 信息 列 嵌 套 一 个 包含 框 ， 然 后 通过 浮动 实现 次 要 信息 列 向 
左 浮动 ， 而 主要 信息 列 向 右 浮动 的 布局 效果 。 视频 讲解 





负 边 界 是 网 页 布局 中 比较 实用 的 一 种 技巧 , 它 能 够 自由 移动 一 个 栏目 到 某 个 位 置 ， 从 而 改变 了 浮 | 
动 布局 和 流动 布局 存在 的 受 限于 结构 的 弊端 , 间接 具备 了 定位 布局 的 一 些 特性 ， 当 然 它 没有 定位 布局 | 
那么 精确 。 本 节 使 用 负 margin 的 方法 来 实现 上 节 示 例 的 设计 方法 ， 如 果 读 者 感 兴趣 ， 可 以 扫 码 阅读 。 


14.5 ” 扫 码 拓展 阅读 


本 节 为 线 上 拓展 内 容 ， 介 绍 网 页 布局 中 可 能 遇 到 的 问题 与 解决 方法 ， 感 兴趣 、 
有 需求 的 读者 可 以 扫 码 选择 阅读 。 





14.6 在 线 练 习 
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设计 CSS3 伸缩 布局 和 响应 布局 


CSS3 定义 了 多 种 网 页 市 局 方式 ， 如 多 列 布 局 、 仲 缩 鳃 布局 、 媒 体 查 询 布 局 等 ， 灵活 使 用 这 
些 新 布局 技术 ， 可 以 设计 适应 不 同 设备 和 环境 的 网 页 ， 如 手机 、 宽 异 等 设备 。 本 章 将 对 这 些 技 
术 进 行 详细 讲解 ， 并 通过 大 量 案 例 帮 助 读者 事 握 它们 的 应 用 


【 学 习 要 点 】 

PH 设计 多 列 布局 
设计 新 版 伸缩 使 布 局 
正常 使 用 媒体 查询 

设计 响应 不 同 设备 的 网 页 布局 


吾 吾 于 


第 15 章 设计 CSS3 伸缩 布局 和 响应 市 局 “一 KS] | 


15.1 多 列 布 局 


CSS3 新 增 column 属性 ， 用 来 设计 多 列 布局 ， 它 允许 网 页 内 容 跨栏 显示 。 
权威 参考 : http://www.w3.org/TR/css3-multicol/ 


15.1.1 设置 列 宽 


column-width 属性 可 以 定义 单列 显示 的 宽度 ， 基 本 语法 如 下 所 示 : 
column-width: <length> | auto | 
取 值 简单 说 明和 如下; | 
<length>: 用 长 度 值 来 定义 列 宽 。 不 允许 为 负 值 。 | 
auto: 根据 <'column-count> 自 定 分 配 宽度 ， 为 默认 值 。 

【示例 】 下 面 示例 演示 column-width 属性 在 多 列 布局 中 的 应 用 。 设计 body 元 素 的 列 宽度 为 300 
像素 ， 如 果 网 页 内 容 能 够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 窗 口 足够 宽 ， 且 内 容 很 多 ， 则 会 在 | 
多 列 中 进行 显示 ， 演 示 效 果 如 图 15.1 所 示 ， 根 据 窗口 宽度 自动 调整 为 两 栏 显示 ， 列 宽度 显示 为 300 | 
像素 。 








15.1 固定 列表 宽度 显示 


<style type="text/css"> 

必定 义 网 页 列 宽 为 300 像素 ， 则 网 页 中 每 个 栏目 的 最 大 宽度 为 300 像素 */ | 

body {column-width:300px:} | 

hl {color: #333333: padding: Spx 8px:font-size: 20px:text-align: center: padding: 12px:} | 

h2 {font-size: 16px: text-align: center:} 

Pp {color: #333333; font-size: 14px: line-height: 180%:; text-indent: 2em:} | 

</style> | 

<hl>W3C 标准 </h1> | 

<p>W3C 的 各 类 技术 标准 在 努力 为 各 类 应 用 的 开发 打造 一 个 <strong> 开 放 的 Web 平台 (Open Web Platform) | 
</strong>。 尽 管 这 个 开放 Web 平台 的 边界 在 不 断 延 伸 ， 产 业界 认为 HIMLS 将 是 这 个 平台 的 核心 ， 平 台 的 能 力 ， 
将 依赖 于 W3C 及 其 合作 伙伴 正在 创建 的 一 系列 Web 技术 ， 包 括 CSS. SVG WOFF. 语义 Web， 及 XML 和 名 类 
应 用 编程 接口 (APIs)。</p> 

<p> 截 至 2014 年 3 月 ，W3C 共 设 立 5 个 技术 领域 ， 开 展 23 个 标准 计划 。W3C 设 有 46 个 工作 组 ok | 
Group)、14 个 兴趣 小 组 (Interest Group)、3 个 协调 组 (Coordination Group)、169 个 社区 组 (Community Group) ， | 


以 及 3 个 业务 组 (Business Group)。</p> (0 
.317 . 


a A 


| <p> 目 前 ，W3C 正在 探讨 技术 专家 及 个 人 参与 W3C 标准 制定 过 程 的 Webizen 计划 ， 敬 请 期 待 。</p> 

| <p>W3C 于 2014 年 11 月 发 布 了 题 为 &ldquo:W3C 工作 重点 (2014 年 11 月 ) "的 报告 ， 这 是 最 新 的 一 份 对 
| W3C 近期 开展 的 工作 要 点 进行 了 综述 的 文章 ， 曾 述 了 近期 的 工作 重点 和 优先 级 。</p> 要 点 进行 了 综述 的 文章 ， 
前述 了 近期 的 工作 重点 和 优先 级 。</p> 


ea 15.1.2 ”设置 列 数 
本 攻 了 
”Note | 


| column-count 属性 可 以 定义 显示 的 列 数 ， 基 本 语法 如 下 所 示 : 
| column-count: <integer> | auto 

| 取 值 简单 说 明 如 下 : 

| <integer>: 用 整数 值 来 定义 列 数 。 不 允许 为 负 值 。 

| 

| 





auto: 根据 <' column-width > 自 定 分 配 宽度 ， 为 默认 值 。 
| 【示例 】 在 上 面 示例 基础 上 ， 如 果 定 义 网 页 列 数 为 3， 则 不 管 浏览 器 窗口 怎么 调整 ， 页 面 内 容 总 
| 是 遵循 三 列 布局 ， 演 示 效 果 如 图 15.2 所 示 。 
| 店 定 义 网 页 列 数 为 3， 这样 整 个 页 面 总 是 显示 为 三 列 */ 
body { column-count:3;} 





15.2 ”设计 三 列 显示 


Ei | 
15.1.3 ”设置 间距 
国 守 | 


视频 讲解 | column-gap 属性 可 以 定义 两 栏 之 间 的 距离 ， 基 本 语法 如 下 所 示 : 
| column-gap: <length> | normal 


取 值 简单 说 明 如 下 : 

<length>: 用 长 度 值 来 定义 列 与 列 之 间 的 空 阶 。 不 允许 为 负 值 。 

| 回 normal: 与 <'font-size> 大 小 相同 。 假 设 该 对 象 的 font-size 为 16px， 则 normal 值 为 16px， 以 
| 此 类 推 。 

| 【示例 】 在 上 面 示例 基础 上 ， 通过 column-gap 和 line-height 属性 配合 使 用 ,把 文档 版 面 设计 得 玖 
， 朗 大 方 ， 以 方便 阅读 。 其 中 列 间距 为 3em， 行 高 为 2.5em， 页 面 内 文字 内 容 看 起 来 更 明晰 、 轻 松 许多 ， 
| 演示 效果 如 图 15.3 所 示 。 


body { 
族 定 义 页 面 内 容 显示 为 三 列 */ 


| 
| 
| 
| 
| column-count: 3: 
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| 
户 定 义 列 间距 为 3em， 默 认为 lem*/ 
column-gap: 3em: | 
line-height: 2.5em: /* 定义 页 面 文本 行 高 */ 

| 


以 及 3 个 业务 组 (Business Note 


W3C 标 准 Se 





且 二 ,Ww3C_E 在 探 计 技 本 专 
W3C 欣 各 尖 拟 术 标准 在 各 力 走 玉 2014 年 3 月 ，W3c 其 设 永 及 个 人 多 与 W3C 标 准 币 定 过 程 

力 采 去 应 用 的 开 必 打 适 一 个 开放 立 5 个 技术 领域 ， 开 展 23 个 玫 的 Webizm 寺 划 ， 共 清 期 符 ， 

的 Web 平台 (Open Web 计划 。W3Ci8 有 45 个 工 

Platform) 。 民 首 谤 个 开放 Web {Waking Group] 14 

平台 的 边界 在 TE 延 他 ， 产 业界 组 (ImenstGrep) 、3 


| 

| 

| 

W3CT2014 生 11 月 发 布 了 三 | 
为 "W3C 工 作 重 点 《2014 年 11 | 
月 ) “的 告 ， 这 是 最 新 的 一 从 | 
对 Wac 扰 项 展 的 工作 槛 点 进行 | 
了 综 过 的 文章 ， 辐 这 了 诉 期 的 工 | 
作 重点 和 优先 经 。 | 
| 

| 

| 

| 


心 ， 平 和 的 鹏 力 举 保 联 于 W3C 及 
其 合作 快 们 正在 创建 的 系列 





图 15.3 设计 疏 朗 的 跨栏 布局 


15.1.4 ”设置 列 边框 Ey 
column-mle 属性 可 以 定义 每 列 之 间 边 框 的 宽度 、 样 式 和 颜色 。 基 本 语法 如 下 所 示 : 


column-mle: < column-mrule-width > || < column-rule-style > || <' column-mle-color > 


取 值 简单 说 明 如 下 : 

回 < column-mle-width >: 设置 对 象 的 列 与 列 之 间 的 边框 厚度 。 

<' column-rule-style >: 设置 对 象 的 列 与 列 之 间 的 边框 样式 。 

<' column-rule-color >: 设置 对 象 的 列 与 列 之 间 的 边框 颜色 。 
column-rule-style 属性 语法 如 下 所 示 ， 取 值 与 边框 样式 border-style 相同 。 


column-rule-width 与 border-width 设置 相同 ，column-rule-color 与 border-color 设置 相同 。 
【示例 】 在 上 面 示例 基础 上 为 每 列 之 间 的 边框 定义 一 个 虚线 分 隔 线 ， 线 宽 为 2 像素 ， 灰 色 显示 ， 
演示 效果 如 图 15.4 所 示 。 





目前 ，WaC 正 在 拧 讨 技术 专 
| 东 及 个 人 参与 W3C 标 准 抽 证 过 程 
的 Webizes 守 划 ， 洽 清关 符 - 
ac 月 盖 布 了 
Ptform 》。 忌 芝 这 个 开 计 Web ME 
平台 的 边界 在 TE 入 伯 ， 产 业界 


心 ， 平 名 的 能 力 符 信 才 于 Wac 及 
其 合作 佑 伴 正在 创建 的 _ 系 到 


了 送 述 的 文章 , 阐述 了 
: 。 作 重 上 和 伏 寺 扔 。 





15.4 设计 列 边框 效果 
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ai 
| 人 # 定 义 页 面 内 容 显示 为 三 列 专 
| column-count: 3; 
A 庆 定 义 列 则 距 为 3em， 默 认为 lem*/ 
| column-gap: 3em: 
| line-height: 2.5em:; 
人 # 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 


column-rule: dashed 2px gray: 


设置 跨 列 显示 
column-span 属性 可 以 定义 跨 列 显示 ， 基 本 语法 如 下 所 示 : 





column-span: none | all 

取 值 简单 说 明 如 下 : 

none: 不 跨 列 。 

all: 横 跨 所 有 列 。 

【示例 】 在 上 面 示例 基础 上 ， 使 用 column-span 属性 定义 一 级 标题 跨 列 显示 ， 演 示 效 果 如 图 15.5 





| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

15.5 ”设计 标题 跨 列 显示 效果 
| 

| 族 定 义 页 面 内 容 显示 为 三 列 */ 

| column-count: 3: 

| 必定 义 列 间距 为 3em， 默 认为 lem*/ 

| column-gap: 3em: 

| line-height: 2.Sem 

| 让 定义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 
| column-rule: dashed 2px gray:} 

| 必 设 置 一 级 标题 跨越 所 有 列 显示 所 

| ht 

| color: #333333: font-size: 20px: text-align: center: 
| padding: 12px: 

| 上 证 跨越 所 有 列 显示 */ 


“3 
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column-span: all: 


2 
Pp {color: #333333; font-size: 14px: line-height: 180%; text-indent: 2em:} 


15.1.6 ”设置 列 高 度 


column-fill 属性 可 以 定义 栏目 的 高 度 是 否 统一 ， 基 本 语法 如 下 所 示 : 
column-fill: auto | balance 

取 值 简单 说 明 如 下 : 

auto: 列 高 度 自 适 应 内 容 。 

回 ”balance: 所 有 列 的 高 度 与 其 中 最 高 的 一 列 统一 。 

【示例 】 在 上 面 示例 基础 上 ， 使 用 column-fill 属性 定义 每 列 高 度 一 致 。 





t 

* 定 义 页 面 内 容 显 示 为 三 列 */ 

column-count: 3; 

必定 义 列 间距 为 3sm， 默 认为 lem*/ | 

column-gap: 3em:; | 

line-height: 2.5em: | 

人 # 定 义 列 边框 为 2 像素 宽 的 灰色 虚线 */ 

column-rule: dashed 2px gray: 

证 设 置 各 列 高 度 一 致 #/ | 

column-fill: balance; | 
| 
| 


15.2 ”新 版 伸缩 盒 


| 
| 
CSS3 伸缩 合 布 局 是 在 不 断 发 展 中 并 不 断 升级 的 ， 大 致 经 历 了 三 个 阶段 ， 并 逐步 达到 稳定 ， 主 流 
浏览 器 对 新 版 本 也 开始 完整 的 支持 。 | 
回 ”2009 年 版 本 (旧版 本 ) : “display:box:” 
2011 年 版 本 (混合 版 本 ) : “display:flexbox:” | 
加 ”2012 年 版 本 人 “display:flex:”。 | 
如 果 把 Flexbox 新 语法 、 旧 语法 和 混合 语法 混合 在 一 起 使 用 ， 就 可 以 让 浏览 器 得 到 完美 的 展示 。 | 
当然 ， 在 使 用 Flexbox 时 ， eesti rede 如 Chrome 浏览 器 要 添加 前 缓 -webkit， | 
Firefox 要 添加 前 缀 -moz- 等 。 本 节 重点 讲解 CSS3 新 版 伸缩 盒 布局 ， 关 于 旧版 和 混合 版 ， 读 者 可 以 阅 | 
读 CSS3 参考 手册 。 


15.2.1 认识 Flexbox 


Flexbox (伸缩 盒 模型 ) 是 一 个 新 的 盒子 模型 ， 它 主要 优化 了 UI 布局 ， 可 以 简单 地 使 一 个 元 素 居 
中 《包括 水 平和 垂直 居中 )， 可 以 扩大 或 收缩 元 素来 填充 容器 的 可 利用 空间 ， 可 以 改变 布局 顺序 等 。 
Flexbox 由 伸缩 容器 和 伸缩 项 目 组 成 : 


| 
| 
| 
\ 
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”在 伸缩 容器 中 ,每 个 子 元 素 都 是 一 个 伸缩 项 目 ， 伸 缩 项 目 可 以 是 任意 数量 的 ， 伸 缩 容器 外 和 伸缩 

| 项 目 内 的 一 切 元 素 都 不 受 影响 。 

| 伸缩 项 目 沿 着 伸缩 容器 内 的 一 个 伸缩 行 定位 , 通常 每 个 伸缩 容器 只 有 一 个 伸缩 行 。 在 默认 情况 下 ， 
全 ”伸缩 行 和 文本 方向 一 致 ， 从 左 至 右 ， 从 上 到 下 。 

| 常规 布局 是 基于 块 和 文本 流 方向 ， 而 Flex 布局 是 基于 flex-flow 流 。 如 图 15.6 所 示 是 W3C 规范 


ie 局 的 外. 


main size 





cross size 
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图 15.6 Flex 布局 模式 


| 
| 
| 伸缩 项 目 是 沿 着 主轴 (main axis)， 从 主轴 起 点 (main-start) 到 主轴 终点 (main-end)， 或 者 沿 着 
| 侧 轴 (cross axis)， 从 侧 轴 起 点 〈cross-start) 到 侧 轴 终 点 〈cross-end) 排列 。 

| 回 主轴 (main axis) : 伸缩 容器 的 主轴 ， 伸 缩 项 目 主要 沿 着 这 条 轴 进 行 排列 布局 。 注 意 ， 它 不 
| 一 定 是 水 平 的 ， 这 主要 取决 于 justify-content 属性 设置 。 

| 回 ”主轴 起 点 (main-start) 和 主轴 终点 (main-end) : 伸缩 项 目 放置 在 伸缩 容器 内 从 主轴 起 点 
| Cmain-start) 向 主轴 终点 (main-start) 方向 。 

回 ”主轴 尺寸 (main size) : 伸缩 项 目 在 主轴 方向 的 宽度 或 高 度 就 是 主轴 的 宽度 ， 伸 缩 项 目 垂直 
| 于 主轴 方向 的 宽度 或 高 度 属 性 是 主轴 的 高 度 。 

| 加 ” 侧 轴 (cross axis) : 垂直 于 主轴 称 为 侧 轴 。 它 的 方向 主要 取决 于 主轴 方向 。 

| 侧 轴 起 点 (cross-start) 和 侧 轴 终点 〈cross-end) : 伸缩 行 的 配置 从 容器 的 侧 轴 起 点 边 开始 ， 


往 侧 轴 终 点 边 结束 。 
侧 轴 尺寸 cross size) : 伸缩 项 目 在 侧 轴 方 向 的 宽度 或 高 度 就 是 项 目的 侧 轴 长 度 ， 由 哪 一 个 
对 着 侧 轴 方向 来 决定 。 


一 个 伸缩 项 目 就 是 一 个 伸缩 容器 的 子 元 素 ,伸缩 容器 中 的 文本 也 被 视 为 一 个 伸缩 项 目 。 伸缩 项 目 
的 内 容 与 普通 文本 流 一 样 。 例 如 ， 当 一 个 伸缩 项 目 被 设置 为 浮动 , 用 户 依然 可 以 在 这 个 伸缩 项 目 中 


hb 


5.2.2 ”启动 伸缩 盒 

| 通过 设置 元 素 的 display 属性 为 flex 或 inline-flex 可 以 定义 一 个 伸缩 容器 。 设 置 为 flex 的 容器 被 
| 泻 染 为 一 个 块 级 元 素 ， 而 设置 为 mline-flex 的 容器 则 泻 染 为 一 个 行内 元 素 。 具 体 语法 如 下 : 
display: flex | inline-flex: 


| 上 面 语法 定义 伸缩 容器 ， 属 性 值 决定 容器 是 行内 显示 ， 还 是 块 显示 ， 它 的 所 有 子 元 素 将 变 成 flex 
」 文档 流 ， 被 称 为 伸缩 项 目 。 








项 目 上 也 没有 效果 。 
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此 时 ，CSS 的 column 属性 在 伸缩 容器 上 没有 效果 ， 同 时 float、clear 和 vertical-align 属性 在 伸缩 





【示例 】 下 面 示例 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 演 示 效 果 如 图 15.7 所 示 。 


<style type= "textcss"> 
.flex-container { 
display: -Webkit-flex: 
display: flex; 
width: S00px: height: 300px; 
border: solid 1px red: 
} 
flex-item { 
background-color: blue; 
width: 200px: height: 200px; 
margin: 10px; 
} 
</style> 
<div class="flex-container"> 
<div class="flex-item"> 伸 缩 项 目 1</div> 
<div class="flex-item"> 伸 缩 项 目 2</div> 
<div class="flex-item"> 伸 缩 项 目 3</div> 
<div class="flex-item"> 伸 缩 项 目 4</div> 
</div> 


DD mao « 
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图 15.7 ”定义 伸缩 盒 布局 














15.2.3 ”设置 主轴 方向 


使 用 flex-direction 属性 可 以 定义 主轴 方向 ， 它 适用 于 伸缩 容器 。 具 体 语法 如 下 : 





flex-direction: row | row-reverse | column | column-reverse 


取 值 说 明 如 下 : 





回 row: 
Tow-reverse: 对 齐 方式 与 row 相反 。 





主轴 与 行内 轴 方向 作为 默认 的 书写 模式 。 即 横向 从 左 到 右 排列 〈 左 对 齐 ) 。 


回 
回 column: 主轴 与 块 轴 方 向 作为 默认 的 书写 模式 。 即 纵向 从 上 往 下 排列 〈 顶 对 齐 ) 。 
回 


column-reverse: 对 齐 方式 与 column 相反 。 
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【示例 】 在 上 节 示 例 基础 上 ， 本 例 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸缩 项 
目 从 上 往 下 排列 ， 演 示 效果 如 图 15.8 所 示 。 


<style type="text/css"> 


全 .flex-container { 


| display: -webkit-flex: 


display: flex: 
Note -webkit-flex-direction: column: 


| flex-direction: column; 
‘width: S00px:height: 300px:border: solid 1px red: 


flex-item { 
background-color: blue; 
width: 200px: height: 200px; 
margin: 10px; 

} 

</style> 


80e0/myet 
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15.8 ”定义 伸缩 项 目 从 上 往 下 布局 


15.2.4 设置 行 数 


视频 讲解 | flex-wrap 定义 伸缩 容器 是 单行 还 是 多 行 显示 伸缩 项 目 , 侧 轴 的 方向 决定 了 新 行 堆放 的 方向 。 具体 

| 语法 格式 如 下 : 

| flex-wrap: nowrap | wrap | wrap-reverse 

| 取 值 说 明 如 下 : 

| nowrap: flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 溢出 容器 。 

| wrap: flex 容器 为 多 行 。 该 情况 下 flex 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 

生 断 行 。 
wrap-reverse: 反 转 wrap 排列 。 

| 【示例 】 在 上 面 示例 基础 上 ， 下 面 示例 设计 一 个 伸缩 容器 ， 其 中 包含 4 个 伸缩 项 目 ， 然 后 定义 伸 
| 缩 项 目 多 行 排列 ， 演 示 效 果 如 图 15.9 所 示 。 
| 
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图 15.9 定义 伸缩 项 目 多 行 布局 




















<style type="text/css"> 
.flex-container { 
display: -webkit-flex: 
display: flex: 
-webkit-flex-wrap: wrap; 
flex-wrap: wrap; 
‘width: S00px: height: 300px;border: solid 1px red: 
} 
.flex-item { 
background-color: blue; | 
‘width: 200px: height: 200px: | 
margin: 10pX: | 
} 
</style> 
【补充 】 | 
flex-flow 属性 是 flex-direction 和 flex-wrap 属性 的 复合 属性 ， 适 用 于 伸缩 容器 。 该 属性 可 以 同时 | 
| 
定义 伸缩 容器 的 主轴 和 侧 轴 。 其 默认 值 为 row nowrap。 具 体 语法 如 下 : | 
flex-flow: <' flex-direction > || <' flex-wrap > 
取 值 说 明 如 下 : 
回 <'flex-direction>: 定义 弹性 盒子 元 素 的 排列 方向 。 
回 ”<'flex-wrap>: 控制 flex 容器 是 单行 或 者 多 行 。 


15.2.5 ”设置 对 齐 方式 
1. 主轴 对 齐 
justify-content 定义 伸缩 项 目 沿 着 主轴 线 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 具 体 语 法 如 下 : 
justify-content: flex-start | flex-end | center | space-between | space-around 


取 值 说 明 如 下 : 
加 flex-start 为 默认 值 ， 伸 缩 项 目 向 一 行 的 起 始 位 置 舍 齐 。 | 
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flex-end: 伸缩 项 目 向 一 行 的 结束 位 置 靠 齐 。 
center: 伸缩 项 目 向 一 行 的 中 间 位 置 靠 齐 。 

space-between: 伸缩 项 目 会 平均 地 分 布 在 行 里 。 第 一 个 伸缩 项 目 一 行 中 的 最 开始 位 置 ， 最 后 
| 一 个 伸缩 项 目 在 一 行 中 最 终点 位 置 。 

| space-around: 伸缩 项 目 会 平均 地 分 布 在 行 里 ， 两 端 保留 一 半 的 空间 。 


加 G3 强 。。 述 汉人 比较 效果 如 图 15.10 所 示 。 


flex-start flex-end center 


| 

| 

| 

| 

| 

| 

| space-between space-around 

| 

| 图 15.10 主轴 对 齐 示 意图 

| 2. 侧 轴 对 齐 

| 
| align-items 定义 伸缩 项 目 在 侧 轴 上 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 具 体 语法 如 下 : 
| align-items: flex-start | flex-end | center | baseline | stretch 

| 取 值 说 明 如 下 : 

| flex-start: 伸缩 项 目 在 侧 轴 起 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 起 始 的 边 。 

| flex-end: 伸缩 项 目 在 侧 轴 终 点 边 的 外 边 距 紧 靠 住 该 行 在 侧 轴 终 点 的 边 。 

| center: 伸缩 项 目的 外 边 距 在 该 行 的 侧 轴 上 居中 放置 。 

| baseline: 伸缩 项 目 根 据 它们 的 基线 对 齐 。 

| stretch: 默认 值 ， 伸 缩 项 目 拉 伸 填充 整个 伸缩 容器 。 此 值 会 使 项 目的 外 边 距 的 尺寸 在 遵照 
| min/max-width/height 属性 的 限制 下 尽 可 能 接近 所 在 行 的 尺寸 。 

| 

| 

| 

| 

| 

| 

| 


回回 罗 罗 加 


上 述 取 值 比较 效果 如 图 15.11 所 示 。 


flex-star flex-end center 


stretch baseline 


15.11 侧 轴 对 齐 示意 图 
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3. 伸缩 行 对 齐 


align-content 定义 伸缩 行 在 伸缩 容器 里 的 对 齐 方式 ， 该 属性 适用 于 伸缩 容器 。 关于 人 顺丰 | 
主轴 上 使 用 justify-content 属性 一 样 ， 但 本 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。 有 具体 语法 如 下 : 
align-content: flex-start | flex-end | center | space-between | space-around | stretch 
取 值 说 明 如 下 : 
flex-start: 各 行 向 伸缩 容器 的 起 点 位 置 堆 车 。 | 
flex-end: 各 行 向 伸缩 容器 的 结束 位 置 堆 蚕 。 
center: 各 行 向 伸缩 容器 的 中 间 位 置 堆 车 。 
space-between: 各 行 在 伸缩 容器 中 平均 分 布 。 
space-around: 各 行 在 伸缩 容器 中 平均 分 布 ， 在 两 边 各 有 一 半 的 空间 。 
stretch: 默认 值 ， 各 行将 会 伸展 以 占用 剩余 的 空间 。 
上 述 取 值 比较 效果 如 图 15.12 所 示 。 





回回 回回 加 加 


flex-start flex-end center 
space-around space-between stretch 


图 15.12 ”伸缩 行 对 齐 示意 图 
【示例 】 下 面 示例 以 上 面 示例 为 基础 ， 定 义 伸缩 行 在 伸缩 容器 中 居中 显示 ， 演 示 效 果 如 图 15.13 


-webkit-flex-wrap: wrap: 
flex-wrap: wrap: 
-webkit-align-content: center: 
align-content: center: | 
width: 500px: height: 300px:border: solid 1px red:; | 
小 | 
.flex-item { | 
background-color: blue: 
width: 200px: height: 200px: 
margin: 10px: 
站 
</style> 
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图 15.13 定义 伸缩 行 居 中 对 齐 














2 | 15.2.6 ”设置 伸缩 项 目 


伸缩 项 目 都 有 一 个 主轴 长 度 (Main Size) 和 一 个 侧 轴 长 度 (Cross Size)。 主 轴 长 度 是 伸缩 项 目 在 
主轴 上 的 尺寸 ， 侧 轴 长 度 是 伸缩 项 目 在 侧 轴 上 的 尺寸 。 一 个 伸缩 项 目的 宽度 或 高 度 取决 于 伸缩 容器 的 
轴 ， 可 能 就 是 它 的 主轴 长 度 或 侧 轴 长 度 。 下 面 属性 适用 于 伸缩 项 目 ， 可 以 调整 伸缩 项 目的 行为 。 

1. 显示 位 置 

order 属性 可 以 控制 伸缩 项 目 在 伸缩 容器 中 的 显示 顺序 ， 具 体 语 法 如 下 : 

order: <integer> 

<integer> 用 整数 值 来 定义 排列 顺序 ， 数 值 小 的 排 在 前 面 。 可 以 为 负 值 。 

2. 扩展 空间 

flex-grow 可 以 定义 伸缩 项 目的 扩展 能 力 ， 决 定 伸缩 容器 剩余 空间 按 比例 应 扩展 多 少 空间 。 具 体 
语法 如 下 : 

flex-grow: <number> 

<number> 用 数值 来 定义 扩展 比率 。 不 允许 为 负 值 ， 默 认 值 为 0。 

如 果 所 有 伸缩 项 目的 flex-grow 设置 为 1， 那么 每 个 伸缩 项 目 将 设置 为 一 个 大 小 相等 的 剩余 空间 。 
如 果 给 其 中 一 个 伸缩 项 目 设置 flex-grow 为 2， 那 么 这 个 伸缩 项 目 所 占 的 剩余 空间 是 其 他 伸缩 项 目 所 
占 剩 余 空间 的 两 倍 。 

3. 收缩 空间 

flex-shrink 可 以 定义 伸缩 项 目 收缩 的 能 力 ， 与 flex-grow 功能 相反 ， 具 体 语 法 如 下 : 

flex-shrink: <number> 

<number> 用 数值 来 定义 收缩 比率 。 不 允许 为 负 值 ， 默 认 值 为 1。 
| 4 伸缩 比率 
| flex-basis 可 以 设置 伸缩 基准 值 ， 剩 余 的 空间 按 比 率 进行 伸缩 。 具 体 语法 如 下 : 
| flex-basis: <length> | <percentage> | auto | content 
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取 值 说 明 如 下 : 
<length>: 用 长 度 值 来 定义 宽度 。 不 允许 为 负 值 。 | 
<percentage>: 用 百分比 来 定义 宽度 。 不 允许 为 负 值 。 | 
auto: 无 特定 宽度 值 ， 取 决 于 其 他 属性 值 。 | 图 
content: 基于 内 容 自动 计算 宽度 。 | 
【补充 】 | yote 
flex 是 flex-grow、flex-shrink 和 flex-basis 三 个 属性 的 复合 属性 ， 该 属性 适用 于 伸缩 项 目 。 其 中 第 | 

二 个 (flex-shrink) 和 第 三 个 参数 (flex-basis) 是 可 选 参数 。 默 认 值 为 “0 1 auto”。 具 体 语法 如 下 | 


flex: none |[ <'flex-grow’> <flex-shrink>? || <'flex-basis'> ] 





5. 对 齐 方式 

align-self 用 来 在 单独 的 伸缩 项 目 上 覆 写 默认 的 对 齐 方 式 。 具 体 语 法 如 下 : 

align-self: auto | flex-start | flex-end | center | baseline | stretch 
属性 值 与 align-items 的 属性 值 相同 。 | 
【示例 1】 以 上 面 示例 为 基础 ， 定 义 伸缩 项 目 在 当前 位 置 向 右 错 移 一 个 位 置 ， 其 中 第 一 个 项 目 位 | 
于 第 二 项 目的 位 置 ， 第 二 个 项 目 位 于 第 三 个 项 目的 位 置 上 ， 最 后 一 个 项 目 移 到 第 一 个 项 目的 位 置 上 ， | 
| 
| 

















演示 效果 如 图 15.14 所 示 。 
<style type="text/css"> 


.flex-container { 
display: -webkit-flex: | 
display: flex: | 
‘width: 500px: height: 300px:border: solid 1px red: | 
} 
.flex-item { background-color: blue: width: 200px: height: 200px: margin: 10px:} 
.flex-item:nth-child(0){ 
-webkit-order: 4: | 
order: 4: | 
} | 
.flex-item:nth-child(1){ 
-webkit-order: 1: 
order: 1: 
) 
.flex-item:nth-child(2){ | 
-webkit-order: 2: | 
order: 2: 
} 
‘flex-item:nth-child(3){ 
-webkit-order: 3: | 
order: 3: | 
} | 
</style> 


【示例 2】 “margin: auto;” 在 伸缩 仗 中 具有 强大 的 功能 ， 一 个 “auto” 的 margin 会 合并 剩余 的 空 “ 
间 。 它 可 以 用 来 把 伸缩 项 目 挤 到 其 他 位 置 。 下 面 示例 利用 op Tight: auto; ”定义 包含 的 项 目 居中 


显示 ， 效 果 如 图 15.15 所 示 。 L 
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| 的 媒体 类 型 功能 更 强大 。 两 者 





于 


> 
<style type="text/css"> 
.flex-container { 
display: -webkit-flex; 
display: flex: 
‘width: S00px: height: 300px: border: solid 1px red: 


.flex-item { 


background-color: blue; width: 200px: height: 200px: 


margin: auto; 
} 
</style> 
<div class="flex-container"> 
<div class="flex-item"> 伸 缩 项 目 </div> 
</div> 
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图 15.14 定义 伸缩 项 目 错位 显示 


图 15.15 定义 伸缩 项 目 居中 显示 


15.3 媒体 查询 


CSS3 在 CSS2 的 媒体 类 型 基础 上 提出 了 Media Queries (媒体 查询 ) 的 概念 。 媒 体 查 询 比 CSS2 





匹配 。 媒 体 类 型 可 以 帮助 用 户 获取 以 下 数据 。 
回 浏览 器 窗口 的 宽 和 高 。 
回 设备 的 宽 和 高 。 








权威 参考 


回 ”设备 的 手持 方向 ， 横 向 还 是 紧 向 。 


要 区 别 : 媒体 查询 是 一 个 值 或 一 个 范围 的 值 ， 而 媒体 类 型 仅仅 是 设备 


权威 参考 : http://www.w3.org/TR/css3-mediaqueries/ 
15.3.1 认识 @media 


CSS3 使 用 @media 规则 定义 媒体 查询 ， 简 化 语法 格式 如 下 : 
@media [only | not]? <media type> [and <expression>]* | <expression> [and <expression>]*{ 

















/# CSS 样式 列表 */ 
} 
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< 


参数 简单 说 明 如 下 : | 
<media_type>: 指定 媒体 类 型 ， 具 体 说 明 请 阅读 CSS 参考 手册 。 | 
<expression>: 指定 媒体 特性 。 放 在 一 对 圆 括号 中 ， 如 “(min-width:400px)” | 
回 ”逻辑 运算 符 ， 如 and (逻辑 与 ) 、not (逻辑 否 ) 、only (兼容 设备 ) 等 。 | 轩 
媒体 特性 包括 13 种 ， 接 受 单个 逻辑 表达 式 作 为 值 ， 或 者 没有 值 。 大 部 分 特性 接受 min 或 max 的 ， 
前 经， 用 来 表示 大 于 等 于 或 者 小 于 等 于 的 逻辑 ， 以 此 避免 使 用 大 于 号 (>) 和 小 于 号 (<) 字符 。 ea 
媒体 特性 的 说 明 请 阅读 CSS3 参考 手册 。 
在 CSS 样式 的 开头 必须 定义 @media 关键 字 ， 然 后 指定 媒体 类 型 ， 再 指定 媒体 特性 。 媒体 特性 的 | 
格式 与 样式 的 格式 相似 ， 分 为 两 部 分 ， 由 冒号 分 隔 ， 冒 号 前 指定 媒体 特性 ， 冒 号 后 指定 该 特性 的 值 。 | 
例如 ， 下 面 语句 指定 了 当 设 备 显示 屏幕 宽度 小 于 640px 时 所 使 用 的 样式 。 
ia screen and (max-width: 639px) { | 
/样式 代码 所 | 
| 





} ! 
可 以 使 用 多 个 媒体 查询 将 同一 个 样式 应 用 于 不 同 的 媒体 类 型 和 媒体 特性 中 , 媒体 查询 之 间 通 过 去 
号 分 隔 ， 类 似 于 选择 器 分 组 。 | 
@media handheld and (min-width:360px).screen and (min-width:480px) { | 
让 样式 代码 */ | 
} 
可 以 在 表达 式 中 加 上 not、only 和 and 等 逻辑 运算 符 。 


/下 面 样式 代码 将 被 使 用 在 除 便携 设备 之 外 的 其 他 设备 或 非 彩色 便携 设备 中 
@media not handheld and (coloD { 
族 样 式 代码 */ 


} 
/下 面 样式 代码 将 被 使 用 在 所 有 非 彩色 设备 中 
ia all and (not color) { 
此 样式 代码 */ | 
} | 
| 
only 运算 符 能 够 让 那些 不 支持 媒体 查询 , 但 是 支持 媒体 类 型 的 设备 , 将 忽略 表达 式 中 的 样式 。 
例如 : 
@media only screen and (color) { | 
刻 样 式 代码 */ | 
} | 
对 于 支持 媒体 查询 的 设备 来 说 ， 能 够 正确 地 读 取 其 中 的 样式 ， 仿 佛 only 运算 符 不 存在 一 样 ; 对 
于 不 支持 媒体 查询 ， 但 支持 媒体 类 型 的 设备 (如 正 8) 来 说 ， 可 以 识别 @media screen 关键 字 ， 但 是 
于 先 读 取 的 是 only 运算 符 ， 而 不 是 screen 关键 字 ， 将 忽略 这 个 样式 。 
痊 提示 : 媒体 查询 也 可 以 用 在 @import 规 则 和 <link> 标 签 中 。 例 如 : 
@import url(example.css) screen and (width:800px): 
/下 面 表示 如 果 页 面 通 过 屏幕 呈现 ， 且 屏幕 宽度 不 超过 480px， 则 加 载 shetland css 样式 表 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> 
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ND 
15.3.2 使 用 @media 

【示例 1】and 运算 符 用 于 符号 两 边 规则 均 满足 条 件 的 匹配 。 


@media screen and (max-width : 600px) { 
大 匹配 宽度 小 于 等 于 600px 的 屏幕 设备 */ 
} 








【示例 2】not 运算 符 用 于 取 非 ， 所 有 不 满足 该 规则 的 均 匹 配 。 


@media no 
Ep 以 外 的 所 有 设备 */ 
a 


I 
| 
| < 负 注意 : not 仅 应 用 于 整个 媒体 查询 。 
| @media not all and (max-width : S00px) f} 
让 等 价 于 */ 
@media not (all and (max-width : 500px)) 他 
/# 而 不 是 权 
@media (not all) and (max-width : 500px) {} 
在 逗号 媒体 查询 列表 中 ，not 仅 会 否定 它 所 在 的 媒体 查询 ， 而 不 影响 其 他 的 媒体 查询 。 
如 果 在 复杂 的 条 件 中 使 用 not 运算 符 ， 要 显 式 添 加 小 括号 ， 避 免 歧 义 。 
【示例 3】 去 号 相当 于 or 运算 符 ， 用 于 两 边 有 一 条 满足 则 匹配 。 
| @media screen , (min-width : 800px) { 
| # 匹 配 屏幕 或 者 宽度 大 于 等 于 800px 的 设备 */ 
| } 
【示例 4】 在 媒体 类 型 中 all 是 默认 值 ， 匹 配 所 有 设备 。 
@media all { 
| 上 # 可 以 过 滤 不 支持 media 的 浏览 器 */ 
| 
| } 
下 
| 常用 的 媒体 类 型 还 有 : screen 匹配 屏幕 显示 器 ，print 匹配 打印 输出 ， 更 多 媒体 类 型 可 以 参考 CSS 
| 参考 手册 。 
| 【示例 5】 使 用 媒体 查询 时 必须 加 括号 ， 一 个 括号 就 是 一 个 查询 。 
| GamediaGnaxwidth:600DD { 
| 让 匹配 界面 宽度 小 于 等 于 600px 的 设备 */ 


ne min-width : 400px) { 
| 让 匹配 界面 宽度 大 于 等 于 400px 的 设备 */ 
} 
| @media (max-device-width : 800px) { 
| 上 # 匹 配 设备 〈 不 是 界面 ) 宽度 小 于 等 于 800px 的 设备 */ 
} 
@media (min-device-width : ) { 
证 匹配 设备 不 是 界面 宽度 大 于 等 于 600px 的 设备 */ 
} 


闪 提示 : 在 设计 手机 网 页 时 ， 应 该 使 用 device-width/device-height， 因 为 手机 浏览 器 默认 会 对 页 面 
进行 一 些 缩放 ， 如 果 按 照 设备 的 宽 和 高 来 进行 匹配 ， 会 更 接近 预期 的 效果 .。 
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【示例 6】 媒 体 查询 允许 相互 嵌 套 ， 这 样 可 以 优化 代码 ， 避 免 元 余 。 
@media not print { 
人/# 通 用 样式 所 
@media (max-width:600px) { 
/# 此 条 匹配 宽度 小 于 等 于 600px 的 非 打印 机 设备 */ 
册 
@media (min-width:600px) { 
/# 此 条 匹配 宽度 大 于 等 于 600px 的 非 打印 机 设备 */ | 
} | 





} 
【示例 7】 在 设计 响应 式 页 面 时 ， 用 户 应 该 根据 实际 需要 ， 先 确定 自 适 应 分 辩 率 的 阔 值 ， 也 就 是 
页 面 响应 的 临界 点 。 


@media (min-width: 768px){ 
让 大 于 等 于 768px 的 设备 */ 
} 


@media (min-width: 992px){ 
/* 大 于 等 于 992px 的 设备 */ | 
} | 
@media (min-width: 1200){ | 
让 大 于 等 于 1200px 的 设备 */ | 
} | 
< 拟 注意 ; 下 面 样式 顺序 是 错误 的 ， 因 为 后 面 的 查询 范围 将 覆盖 掉 前 面 的 查询 范围 ， 导 致 前 面 的 媒体 
查询 失效 。 
@media (min-width: 1200){ } 
@media (min-width: 992px){ } 
@media (min-width: 768px){ } | 
因此 ， 当 我 们 使 用 min-width 媒体 特性 时 ， 应 该 按 从 小 到 大 的 顺序 设计 各 个 阐 值 。 同 理 ， 如 果 使 
用 max-width， 就 应 该 按 从 大 到 小 的 顺序 设计 各 个 阔 值 。 | 
@media (max-width: 1199){ | 
人 # 小 于 等 于 1199px 的 设备 */ 


} 
@media (max-width: 991px){ 
/# 小 于 等 于 991px 的 设备 */ | 
} 
@media (max-width: 767px){ | 
/# 小 于 等 于 768px 的 设备 */ | 
} | 
【示例 8】 用 户 可 以 创建 多 个 样式 表 ， 以 适应 不 同 媒体 类 型 的 宽度 范围 。 当 然 ， 更 有 效率 的 方法 | 
是 将 多 个 媒体 查询 整合 在 一 个 样式 表 文 件 中 ， 这 样 可 以 减少 请 求 的 数量 。 | 
ia only screen and (min-device-width : 320px) and (max-device-width : 480px) { | 
从 样式 列表 */ 














ia only screen and (min-width : 321px) { 
/# 样 式 列表 */ 
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会 内 【示例 9】 如 果 从 资源 的 组 织 和 维护 的 角度 考虑 ， 可 以 选择 使 用 多 个 样式 表 的 方式 来 实现 媒体 查 
和 询 ， 这 样 做 更 高 效 。 
Jote | <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 
<link rel="stylesheet" media="print" href="print.css" /> 


| 

| 

【示例 10] 使 用 orientation 属性 可 以 判断 设备 屏幕 当前 是 横 屏 《〈 值 为 landscape)， 还 是 竖 屏 ( 什 
| 为 portrait)。 

| @media screen and (orientation: landscape) { 
| .iPadLandscape { 

| width: 30%; 

| float right: 

} 

| } 

| @media screen and (orientation: portrait) { 
| .ipadPortrait {clear: both:} 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 


不 过 orientation 属性 只 在 iPad 上 有 效 ， 对 于 其 他 可 转 屏 的 设备 (如 iPhone)， 可 以 使 用 
| min-device-width 和 max-device-width 来 变通 实现 。 


15.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 CSS3 新 布局 。 
15.4.1 设计 三 栏 伸缩 页 面 


视频 讲 名 下 面 示 例 根据 15.3 节 介 绍 的 方法 ， 使 用 不 同 版 本 语法 ， 设 计 一 个 兼容 不 同 设备 和 浏览 器 的 弹性 
页 面 ， 演 示 效 果 如 图 15.16 所 示 。 





So EET 


水 调 歌 头 :明月 几时 有 
苏轼 
两 原 中 秋 ， 欢 例 达 已 ， 大 苹 ， 作 此 科 ， 头子 由 - 


明月 几时 有 ? 把 酒 问 青 天 . 上 言 交 ， 今 交 是 向 年 。 我 歼 
pT 只 区 护 屡 玉手 下 圣 春 。 起 短 于 清 涡 ， 何 似 在 
间 





转 朱 阁 ， 供 给 户 。 耻 无 起 。 不 应 有 晨 ， 向 率 长 癌 5 别 时 国 ? 人 有 
Wn 月 有 阴 罚 回 臣 。 此 李 古 难 全 。 介 束 人 长 义 ， 千 至 共 





回 
示例 效果 图 15.16 ”定义 混合 伸缩 盒 布局 
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示例 主要 代码 如 下 : 


<style type="text/css"> 
page-wrap { 


} 


display: -webkit-box: 
display: -moz-box: 
display: -ms-flexbox: 
display: -webkit-flex: 
display: flex; 


.main-content { 


-Webkit-box-ordinal-group: 2; 
-moz-box-ordinal-group: 2: 
-ms-flex-order: 2; 


谍 2009 版 -iOS 6-, Safari 3.1-6*/ 

放 2009 版 -Firefox 19-( 存 在 缺陷 )*/ 
谍 2011 版 - 正 10*/ 

上 # 最 新 版 - Chrome */ 

上 庆 最 新 版 - Opera 12.1, Firefox 20+ */ 


谍 2009 版 -iOS 6-, Safari 3.1-6*/ 
店 2009 版 - Firefox 19-*/ 
谍 2011 版 - 正 10*/ 


-webkit-order: 2; 店 最 新 版 - Chrome */ 
order: 2; 上 # 最 新 版 - Opera 12.1. Firefox 20+*/ 
width: 60%; 尾 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ 
-moz-box-flex: 1 人 # 如 果 没 有 该 声明 ， 主 内 容 (60%) 会 伸展 到 和 最 宽 的 段落 ， ， 
就 像 是 段落 设置 了 white-space:nowrap */ | 
background: white; | 
} | 
main-nav { | 
-webkit-box-ordinal-group: 1: 诊 2009 版 -iOS 6-, Safari 3.1-6*/ | 
-moz-box-ordinal-group: 1: 谨 2009 版 -Firefox 19-*/ | 
-ms-flex-order: 1: 让 2011 版 -三 10*/ | 
-webkit-order: 1; 上 # 最 新 版 - Chrome */ | 
order: 1; /# 最 新 版 - Opera 12.1, Firefox 20+ */ | 
-Webkit-box-flex: 1; 访 2009 版 -iOS 6-, Safari 3.1-6*/ | 
-moz-box-flex: 1: 谍 2009 版 - Firefox 19-*/ | 
width: 20%: 上 # 2009 版 语法 ， 否 则 将 崩溃 */ | 
-Webkit-flex: 1: * Chrome */ | 
-ms-flex: 1:; RIE10Y | 
flex: 1; /# 最 新 版 - Opera 12.1，Firefox 20+ */ | 
background: #ccc: | 
) 
.main-sidebar { | 
-webkit-box-ordinal-group: 3; 谍 2009 版 -iOS 6-，Safari 3.1-6*/ | 
-moz-box-ordinal-group: 3: 诊 2009 版 - Firefox 19- #/ | 
-ms-flex-order: 3: 启 2011 版 -下 10*/ | 
-webkit-order: 3: /# 最 新 版 - Chrome */ | 
order: 3: /# 最 新 版 - Opera 12.1，Firefox 20+ */ | 
-webkit-box-flex: 1: 谍 2009 版 -iOS 6-，Safari 3.1-6*/ | 
-moz-box-flex: 1: /* Firefox 19- */ | 
width 2096: 入 2009 版 ， 否 则 将 崩溃 */ | 
-ms-flex: 1: 放 2011 版 -下 10*/ | 
-webkit-flex: 1: /# 最 新 版 - Chrome */ | 
flex: 1: /# 最 新 版 - Opera 12.1，Firefox 20+ */ | 
background: #cce: | 
} 


.main-content, .main-sidebar. .main-nav { padding: lem: } 





body {padding: 2em: background: #79a693:} 
*{ | 
\ 
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的 
-webkit-box-sizing: border-box: 
-moz-box-sizing: border-box: 
box-sizing: border-box:} 

hl,h2 { 

全 站 | font: bold 2em Sans-Serif: 

一 一 margin: 0 0 lem 0:} 

h2 { font-size: 1.Sem: } 

Pp {margin: 00 lem 0: } 

| </style> 

<div class="page-wrap"> 
<section class="main-content"> 


<h1> 水 调 歌 头 。 明 月 几时 有 </h1> 


</section> 


<h2> 宋 词 精 选 </h2> 


</nav> 


<h2> 词 人 列表 </h2> 


| 页 面 被 包 庄 在 类 名 为 page-wrap 的 容器 中 ， 容 器 包含 3 个 子 模块 。 现 在 将 容器 定义 为 伸缩 容器 ， 
| 此 时 每 个 子 模块 自动 变 成 了 伸缩 项 目 。 
| <div class="page-wrap"> 
| <section class="main-content"> </section> 
<nav class="main-nav"></nav> 
<aside class="main-sidebar"></aside> 
</div> 
本 示例 设计 各 列 在 一 个 伸缩 容器 中 显示 上 下 文 , 只 有 这 样 这 些 元 素 才能 直接 成 为 伸缩 项 目 ， 它们 
| 之 前 是 什么 没有 关系 ， 只 要 现在 是 伸缩 项 目 即 可 。 
本 示例 把 Flexbox 旧 的 语法 、 中 间 混 合 语法 和 最 新 的 语法 混在 一 起 使 用 ， 它 们 的 顺序 很 重要 。 
display 属性 本 身 并 不 添加 任何 浏览 器 前 级 ,用 户 需 要 确保 旧 语 法 不 要 有 覆盖 新 语法 , 让 浏览 器 同时 支持 。 


‘page-wrap { 

display: -webkit-box: 谍 2009 版 -iOS 6-. Safari 3.1-6*/ 
display: -moz-box: 谍 2009 版 -Firefox 19-( 存 在 缺陷 )*/ 
display: -ms-flexbox: 诺 2011 版 - 正 10*/ 

| display: -webkit-flex: 上 # 最 新 版 - Chrome */ 

| display: flex: 上 # 最 新 版 - Opera 12.1. Firefox 20+ */ 

| } 

| 


| 整个 页 面包 含 三 列 , 设计 一 个 20%、60%、20% 网 格 布局 。 第 1 步 , 设置 主 内 容 区 域 宽度 为 60%; 
| 第 2 步 ， 设 置 侧 边栏 来 填补 剩余 的 空间 。 同 样 把 新 旧 语法 混在 一 起 使 用 : 





| .main-content { 

| -webkit-box-ordinal-group: 2: 谍 2009 版 -iOS 6-. Safari 3.1-6 */ 
| -moz-box-ordinal-group: 2: 放 2009 版 - Firefox 19-*/ 

| -ms-flex-order: 2: /#*2011 版 - 正 10*/ 
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-webkit-order: 2: 庆 最 新 版 - Chrome */ | 
order 2: 上 # 最 新 版 - Opera 12.1, Firefox 20+ */ | 
width: 6096: 上 # 不 会 自动 伸缩 ， 其 他 列 将 占据 空间 */ | 
-moz-box-flex: 1; /* 如 果 没有 该 声明 ，Firefox 19- 将 溢出 h， 覆 盖 宽 度 */ | 





} | 
在 新 语法 中 ， 没 有 必要 给 边栏 设置 宽度 ， 因 为 它们 同样 会 使 用 20% 比 例 填充 剩余 的 40% 的 空间 。 
但 是 ， 如 果 不 显 式 设 置 宽 度 ， 在 旧 语 法 下 会 直接 崩溃 。 | 
完成 初步 布局 之 后 ， 需 要 重新 排列 顺序 。 这 里 设计 主 内 容 排列 在 中 间 ， 但 在 源码 之 中 ， 它 是 排列 | 
在 第 一 的 位 置 。 使 用 Flexbox 可 以 非常 容易 实现 ， 但 是 用 户 需要 把 Flexbox 几 种 不 同 的 语法 混在 一 起 | 
使 用 : | 
.main-content { | 
-Webkit-box-ordinal-group: 2: | 
-moz-box-ordinal-group: 2: | 
-ms-flex-order: 2: | 
-webkit-order: 2; | 
Order: 2; | 
} | 
.main-nav { | 
-webkit-box-ordinal-group: 1: | 
-moz-box-ordinal-group: 1; | 
-ms-flex-order: 1; | 
-webkit-order: 1: | 
order: 1: | 
} 
‘main-sidebar { | 
-webkit-box-ordinal-group: 3; | 
-moz-box-ordinal-group: 3: 
-ms-flex-order: 3; 
-webkit-order: 3: 
Order: 3; | 
} | 


15.4.2 ”设计 自 适 应 页 面 


本 例 借助 Flexbox 伸缩 盒 布 局 ， 设 计 页 面 呈现 3 行 3 列 布局 样式 ， 同 时 能 够 根据 窗口 自 适应 调整 | 视频 讲解 
各 自 空 间 ， 以 满 屏 显示 ， 效 果 如 图 15.17 所 示 。 | 





Article 





图 15.17 HTMLS5 应 用 文档 
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页 面 主要 代码 如 下 所 示 : 

<style type="text/css"> 

让 基本 样式 */ 

给 | * {margin: 0: padding: 0: 

大 -moz-box-sizing: border-box: 
-webkit-box-sizing: border-box: 

Note box-sizing: border-box: 





| 
| } 
html, body {height: 100%:; color: #ffF:} 
body { min-width: 100%; } 
header. section, nav, aside. footer { display: block: text-align:center; font-size:2em: font-weight:bold; } 
* 页 眉 框 样式 ， 限 高 、 限 宽 */ 
header { 
background-color: hsla(200.10%.70%,.5): 
min-height: 100px: padding: 10px 20px: 
min-width: 100%; 


} 

让 主体 区 域 框 样式 ， 满 宽 显示 */ 

section {min-width: 1009%6:} 

上 # 导 航 框 样式 : 固定 宽 度 */ 

nav {background-color: hsla(300,60%,20%,.9):padding: 1%;width: 220px:} 
A* 文 档 栏 样 式 */ 

article {background-color: hsla(120.50%.50%..9): padding: 1%:;} 

启 侧 边栏 样式 ， 弹 性 宽度 */ 

aside {background-color: hsla(20.80%,80%.,.9); padding: 1%:width: 220px:} 
让 页 脚 样式 ， 限 高 、 限 宽 */ 

footer { 

| background-color: hsla(250.509%6.8096..9): 

| min-height: 60px: padding: 1%:; 

| min-width: 10096: 


} 
/*flexbox 样式 */ 
body { 
必 设 置 body 为 伸缩 容器 */ 
display: -webkit-box:/* 旧 版 本 : iOS 6-. Safari 3.1-6*/ 
display: -moz-box:/* 旧 版 本 : Firefox 19- */ 
display: -ms-flexbox:/* 混 合 版 本 : IE10*/ 
display: -webkit-flex:/* 新 版 本 : Chrome*/ 
display: flex:/* 标 准 规范 : Opera 12.1, Firefox 20+*/ 
记 伸 缩 项 目 换行 */ 
-moz-box-orient: Vertical: 
-webkit-box-orient: vertical: 
-moz-box-direction: normal: 
-moz-box-direction: normal: 
| -moz-box-lines: multiple: 
| -webkit-box-lines: multiple: 
| -webkit-flex-flow: column wrap: 
| -ms-flex-flow: column wrap: 
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Ss 


| 

flex-flow: column wrap: | 

} | 
尾 实 现 stick footer 效果 */ | 
section { | 
display: -moz-box: | 





display: -webkit-box: | 
display: -ms-flexbox: | yote 
display: -Webkit-flex: Note 
display: flex: 

-webkit-box-flex: 1; 

-moz-box-flex: 1; 

-ms-flex: 1; 

-webkit-flex: 1; 

flex: 1; 

-moz-box-orient: horizontal: 

-webkit-box-orient: horizontal: 

-moz-box-direction: normal; 

-Webkit-box-direction: normal; 

-moz-box-lines: multiple: 

-webkit-box-lines: multiple: 

-ms-flex-flow: row wrap; 

-webkit-flex-flow: row wrap: 

flex-flow: row wrap; 

-moz-box-align: stretch; 

-webkit-box-align: stretch; 

-ms-flex-align: stretch: 

-webkit-align-items: stretch; 

align-items: stretch: 





| 

| 

|! 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

} | 
/* 文 章 区 域 伸缩 样式 */ | 
article { | 
-moz-box-flex: 1; | 
-webkit-box-flex: 1: | 
-ms-flex: 1; | 
-Webkil | 
flex: 1: | 
-moz-box-ordinal-group: 2: | 
-webkit-box-ordinal-group: 2: | 
-ms-flex-order: 2: | 
-webkit-order: 2: | 
order: 2: | 
| 

| 

| 

| 

| 

| 

| 





flex: 1; 


} 

刻 侧 边栏 伸缩 样式 */ 

aside { 
-moz-box-ordinal-group: 3: 
-webkit-box-ordinal-eroup: 3: 
-ms-flex-order: 3: 
-webkit-order: 3: 
order: 3; 
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</style> 


<header>Header</header> 
<section> 
<article>Article</article> 
<nav>Nav</nav> 
<aside>Aside</aside> 
</section> 
<footer>Footer</footer> 


15.4.3 设计 响应 式 页 面 


本 例 在 页 面 中 设计 3 个 栏目 : 
| 回 ”<div id="main">: 主要 内 容 栏目 。 
加 ”<div id="sub">: 次 要 内 容 栏目 。 
<div id="sidebar">: 侧 边栏 栏目 。 
构建 的 页 面 结 构 如 下 : 
<div id="container"> 
<div id="wrapper"> 
<div id="main"> 
<h1> 水 调 歌 头 。 明 月 几时 有 </h1> 
<h2> 苏 轼 </h2> 





<h2> 宋 词 精 选 <h2> 


</div> 
<div id="sidebar"> 
| <h2> 词 和 列表 </h2> 
| <ul> 
| <li>"… /i> 
| </ul> 
</div> 
| </div> 
| 设计 页 面 能 够 自 适应 屏幕 宽度 ， 呈 现 不 同 的 版 式 布局 。 当 显示 屏幕 宽度 在 999px 以 上 时 , 让 3 个 
| 栏目 并 列 显示 ; 当 显示 屏幕 宽度 在 639px 以 上 、1000px 以 下 时 ， 设 计 两 个 栏目 显示 ， 当 显示 屏幕 宽 
| 度 在 640px 以 下 时 ， 让 3 个 栏目 堆 芭 显示 。 
| <style type="text/css"> 
上 # 默认 样式 */ 
入 网 页 宽度 固定 ， 并 居中 显示 */ 
#container { width: 960px: margin: auto:} 
/主体 宽度 qy 
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#wrapper {width: 740px: float: left:} 

证 设计 三 栏 并 列 显示 */ 

#main {width: S20px: float: right:} 

#sub { width: 200px: float: left:} 

#sidebar { width: 200px: float: right:} 

上 # 窗口 宽度 在 999px 以 上 */ 

@media screen and (min-width: 1000px) { 
启 3 栏 显示 */ | 
#container { width: 1000px; } | 
#wrapper { width: 780px: float: left: } 
#main {width: 560px; float: right: } 
#sub { width: 200px; float: left: } 
#sidebar { width: 200px: float: right: } 





} 

上 # 窗口 宽度 在 639px 以 上 、1000px 以 下 */ 

@media screen and (min-width: 640px) and (max-width: 999px) { 
店 2 栏 显示 */ 
#container { width: 640px: } | 
#wrapper { width: 640px: float: none: } | 
-height { line-height: 300px: } | 
#main { width: 420px; float: right; } | 
#sub {width: 200px: float: left: } 
#sidebar {width: 100%:; float: none: } 


} 

上 # 窗口 宽度 在 640px 以 下 */ 

@media screen and (max-width: 639px) { 
启 1 栏 显示 */ 
#container { width: 100%:; } 
#wrapper { width: 100%: float: none: } 
#main {width: 100%%; float: none: } 
#sub { width: 100%: float: none: } 
#sidebar { width: 100%: float: none; } 

} 

</style> 


当 显示 屏幕 宽度 在 999px 以 上 时 ，3 栏 并 列 显示 ， 预 览 效果 如 图 15.18 所 示 。 





图 15.18 显示 屏幕 宽度 在 999px 以 上 时 页 面 显示 效果 肥 便装 本 
当 显示 屏幕 宽度 在 639px 以 上 、1000px 以 下 时 ， 两 栏 显示 ， 预 览 效果 如 图 15.19 所 示 ; 当 显 示 屏 
幕 宽度 在 640px 以 下 时 ，3 个 栏目 从 上 往 下 堆 基 显示， 预览 效果 如 图 15.20 所 示 。 
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水 调 歌 头 .明月 几时 有 
劳 加 


两 原 中 加。 丈 饮 过 日 .二 本 ， 作 此 访 ， 共 是 了 由 - 


要 月 时 有 4 把 湘 问 厅 天 。 不 知 天 上 宫 阅 ， 仿 少 是 何 年 。 我 人 科 风 归 去 ， 只 到 于 村 
三 守 ， 吾 和 不胜 不。 起 甘 大 光影 ， 何 似 在 条 


人 有 有 了 


加 所 ,由 证 芝 全 ， 但 原 人 长 
水 调 歌 头 ' 明 月 几时 有 
苏轼 
两 习 中秋。 次 饮 达 号。 大 革 ， 作 此 技 ， 本 人 于 由 。 
1 
Ee 有 
人 在 人 四? 


转 和 | pd 
i 在 淮 全 ， 但 孤 人 长 入， 


图 15.19 宽度 在 639px 以 上 、1000px 以 下 时 的 效果 图 15.20 ”宽度 在 640px 以 下 时 的 效果 


15.4.4 设计 响应 式 菜单 


本 例 设计 一 个 响应 式 菜单 ， 能 够 根据 设备 显示 不 同 的 伸缩 盒 布局 效果 。 在 小 屏 设备 上 ， 从 上 到 下 
显示 ; 在 默认 状态 下 ， 从 左 到 右 显 示 ， 右 对 齐 盒子 当 设备 小 于 801 像素 时 ， 设 计 导 航 项 目 分 散 对 齐 
显示 ， 示 例 预 览 效果 如 图 15.21 所 示 。 


© | localhost/mysite/test htrl 





介 于 600 和 800 像素 之 间 设备 





示例 效果 大 于 799 像素 屏幕 
1521 定义 伸缩 项 目 居中 显示 
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< | 


background: deepskyblue: 
谨 启动 伸缩 盒 布局 */ 
display: -webkit-box: 
display: -moz-box: 

display: -ms-flexbox: 
display: -webkit-flex: 
display: flex; 
-webkit-flex-flow: row wrap: 
证 所 有 列 面向 主轴 终点 位 置 靠 齐 */ | 
justify-content: flex-end: | 


} 

让 设计 导航 条 内 超 链接 默认 样式 */ 

.navigation a { text-decoration: none; display: block: padding: lem: color: white:} | 
放 设 计 导 航 条 内 超 链接 在 鼠标 经 过 时 的 样式 */ | 
navigation a:hover { background: blue: } | 
A# 在 小 于 801 像素 设备 下 伸缩 布局 */ | 
@media all and (max-width: 800px) { 

.- 放 当 在 中 等 屏幕 中 ,导航 项 目 居 中 显示 ， 并 且 剩余 空间 平均 分 布 在 列表 之 间 */ 

.navigation { justify-content: space-around: }} | 
:在 小 于 601 像素 设备 下 伸缩 布局 */ | 
@media all and (max-width: 600px) { | 

navigation { /* 在 小 屏幕 下 ， 没 有 足够 空间 行 排列 ， 可 以 换 成 列 排列 * | 

-webkit-flex-flow: column wrap: 
flex-flow: column wrap: 
padding: 0:} 


| 
| 
-navigation a { | 
| 
| 





text-align: center: 
padding: 10px: 
border-top: 1px solid rgba(255,255.255.0.3); 
border-bottom: 1px solid reba(0.0.0.0.1D):} | 
.navigation li:last-of-type a { border-bottom: none: } | 
} | 
</style> | 
<ul class="navigation"> 
<li><a hre 仁 "#"> 首 页 </a></li> 
<li><a hre 伍 "#"> 咨 询 </a></li> 
<li><a hre 伍 "#"> 产 品 </a></li> | 
<li><a hre 伍 "#"> 关 于 </a></li> | 
<hn> | 


15.5 在 线 练 习 


1. Flexbox 3 个 不 同 版 本 的 规范 对 应 着 不 同 的 实现 。 需 要 关注 哪个 版 本 ， 
取决 于 需要 支持 的 浏览 器 。 
2. 练习 响应 式 网 页 设计 的 实现 方式 。 
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设计 CSS3 动画 


CSS3 动画 包括 过 渡 动 画 和 关键 帧 动画 ， 它 们 主要 通过 改变 CSS 属性 值 来 模拟 实现 。 本 章 
将 详细 介绍 Transform、Transitions 和 Animations 三 大 功能 模块 ， 其 中 Transform 实现 对 网 页 对 
象 的 变形 操作 ,Transitions 实现 CSS 属性 过 渡 变 化 , Animations 实现 CSS 样式 分 步 式 演示 效果 。 


【学 习 要 点 】 


dl 


吾 吾 于 


设计 对 象 变形 操作 

设计 过 渡 样 式 

设计 关键 帧 动画 

能 金 灵 活 使 用 CSS3 动画 设计 页 面 将 效 
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< 


16.1 设计 变形 动画 


CSS3 变形 包括 3D 变形 和 2D 变形 ，3D 变形 使 用 基于 2D 变形 的 相同 属性 ， 实 现 网 页 对 象 的 旋 | 
转 、 缩 放 、 平 移 和 倾斜 等 操作 。CSS 2D 变形 获得 了 各 主流 浏览 器 的 支持 ， 但 是 CSS 3D 变形 支持 程 
度 不 是 很 完善 。 考 虑 到 浏览 器 兼容 性 ，3D 变形 在 实际 应 用 时 应 添加 私有 属性 ， 并 且 个 别 属性 在 某 些 | 
主流 浏览 器 中 并 未 得 到 很 好 的 支持 。 | 


16.1.1 设置 变形 原点 
CSS 变形 的 原点 默认 为 对 象 的 中 心 点 〈5096 5096)， 使 用 transform-origin 属性 可 以 重新 设置 新 的 











| 视频 讲解 
变形 原点 。 语 法 格式 如 下 所 示 : | 


transform-origin:[ <percentage> | <length> | left | center@® | right ] [ <percentage> | <length> | top | center® | 
bottom ]? | 


取 值 简单 说 明 如 下 : 
<percentage>: 用 百分比 指定 坐标 值 。 可 以 为 负 值 。 
<length>: 用 长 度 值 指定 坐标 值 。 可 以 为 负 值 。 
left: 指定 原点 的 横 坐 标 为 left。 
centerQ): 指定 原点 的 横 坐 标 为 center。 
right， 指 定 原点 的 横 坐 标 为 right。 | 
top: 指定 原点 的 纵 坐 标 为 top。 | 
centerB): 指定 原点 的 纵 坐 标 为 center。 | 
bottom: 指定 原点 的 纵 坐 标 为 bottom。 | 
【示例 】 通 过 重 置 变形 原点 ， 可 以 设计 不 同 的 变形 效果 。 在 下 面 示例 中 以 图 像 的 右上 角 为 原点 逆 | 
时 针 旋 转 图 像 45 度 ， 则 比较 效果 如 图 16.1 所 示 。 | 
<style type="text/css"> | 
img {/* 固定 两 幅 图 像 相 同 大 小 和 相同 显示 位 置 */ | 
position: absolute: 
left: 20px: 
top: 10px: 
width: 170px: | 
width: 250px: | 
1 


回回 加 回回 罗 图 轩 


} 

img.bg {/* 设置 第 1 幅 图 像 作为 参考 */ 
opacity: 0.3: 
border: dashed 1px red: 


} | 

imgchange {/* 变形 第 2 幅 图 像 */ | 
border: solid 1px red: | 
transform-origin: top right; ”/* 以 右上 角 为 原点 进行 变形 */ 
transform: rotate(-45deg); “人 * 逆 时 针 旋 转 45 度 */ 

} 

</style> 

<img class="bg" stc="images/1.jpg"> 

<img class="change" src="images/1.jpg"> 
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图 16.1 自 定义 族 转 原点 
| 16.1.2 定义 2D 旋转 


rotate() 函 数 能 够 在 2D 空间 内 旋转 对 象 ， 语 法 格式 如 下 : 
rotate(<angle>) 
参数 angle 表示 角度 值 ， 取 值 单位 可 以 是 : 度 , 如 90deg (90 度 , 一 圈 360 度 ); 梯度 ， 如 100grad 
(相当 于 90 度 , 360 度 等 于 400grad); 弧度 , 如 1.57rad( 约 等 于 90 度 , 360 度 等 于 2r); 圈 , 如 0.25tum 
(等 于 90 度 ，360 度 等 于 1tum)。 
【示例 】 以 16.1.1 节 示 例 为 基础 ， 下 面 按 默 认 原 点 逆 时 针 旋转 图 像 45 度 ， 效 果 如 图 16.2 所 示 。 
img.change { 
border: solid 1px red: 
transform: rotate(-45deg): 





16.1.3 ”定义 2D 缩放 





图 16.2 定义 旋转 效果 


scale0 函 数 能 够 缩放 对 象 大 小 ， 语 法 格式 如 下 : 
scale(<number>[. <number>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 宽度 和 高 度 缩放 比例 。 取 值 简单 说 明 如 下 。 
如 果 取 值 为 正 数 ， 则 基于 指定 的 宽度 和 高 度 将 放大 或 缩小 的 对 象 。 
如 果 取 值 为 负数 ， 则 不 会 缩小 元 素 ， 而 是 翻转 元 素 〈 如 文字 被 反 转 ) ， 然 后 再 缩放 元 素 。 
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如 果 取 值 为 小 于 1 的 小 数 〈 如 0.5) ， 可 以 缩小 元 素 。 
回 ” 如 果 第 二 个 参数 省 略 ， 则 第 二 个 参数 等 于 第 一 个 参数 值 。 | 
【示例 】 以 16.1.2 节 示 例 为 基础 ， 下 面 按 默认 原点 把 图 像 缩小 12， 效 果 如 图 16.3 所 示 。 | 
img.change { 
border: solid 1px red: 
transform: scale(0.5): 








16.3 缩小 对 象 一 倍 效果 
16.1.4 定义 2D 平移 
translate() 函 数 能 够 平移 对 象 的 位 置 ， 语 法 格式 如 下 : 
translate(<translation-value>[, <translation-value>]) 


该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 X 轴 和 YY 轴 相对 于 原点 的 偏 移 距离 。 如 果 省 略 参 | 
数 ， 则 默认 值 为 0。 如 果 取 负 值 ， 则 表示 反 向 偏 移 ， 参 考 原点 保持 不 变 。 





示 效果 如 图 16.4 所 示 。 | 
| 


img.change { 

border: solid 1px red: 

transform: translate(150px, 50px):; 
} 





图 16.4 平移 对 象 效果 
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skew0 函 数 能 够 倾斜 显示 对 象 ， 语 法 格式 如 下 : 
| skew(<angle> [. <angle>]) 
| 该 函数 包含 两 个 参数 值 ， 分 别 用 来 定义 对 象 在 X 轴 和 Y 轴 倾 斜 的 角度 。 如 果 省 略 参数 ， 则 默认 
JNote | 值 为 0。 与 rotate0 函 数 不 同 ，rotate0 函 数 只 是 旋转 对 象 的 角度 ， 而 不 会 改变 对 象 的 形状 ，skew0 函 数 
| 会 改变 对 象 的 形状 。 
【示例 】 下 面 示例 使 用 skew0 函 数 变形 图 像 ，X 轴 倾 斜 30 度 ，Y 轴 倾 斜 20 度 ， 效 果 如 图 16.5 





border: solid 1px red: 





图 16.5 ”倾斜 对 象 效果 





视频 讲解 | matrix() 是 一 个 矩阵 函数 ， 它 可 以 同时 实现 缩放 、 旋 转 、 平 移 和 倾斜 操作 ， 语 法 格式 如 下 : 
matrix(<number>. <number>, <number>. <number>, <number>. <number>) 


该 函数 包含 6 个 值 ， 具 体 说 明 如 下 : 

第 1 个 参数 控制 和 轴 缩 放 。 

第 2 个 参数 控制 轴 倾 斜 。 

第 3 个 参数 控制 立轴 倾斜 。 

第 4 个 参数 控制 立轴 缩放 。 

第 5 个 参数 控制 X 轴 平移 。 

第 6 个 参数 控制 立轴 平移 。 

【示例 】 下 面 示例 使 用 matrix0 函 数 模 拟 16.1.5 节 示例 的 倾斜 变形 操作 ， 效 果 类 似 16.1.5 节 示 例 
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【补充 】 多 个 变形 函数 可 以 在 一 个 声明 中 同时 定义 。 例 如 : 
div 
transform: translate(80. 80): 
transform: Iotate(4Sdeg): 
transform: scale(1.5, 1.5); 
} 
针对 上 面 样式 ， 可 以 简化 为 : 
div { transform: translate(80. 80) rotate(45deg) scale(1.5. 1.5):} 


16.1.7 定义 3D 平移 


3D 平移 主要 包括 下 面 4 个 函数 : 
translatex(<translation-value>): 指定 对 象 入 轴 (水平 方向) 的 平移 。 
translatey(<translation-value>): 指定 对 象 立轴 (垂直 方向 ) 的 平移 。 
translatez(<length>): 指定 对 象 Z 轴 的 平移 。 | 
translate3d(<translation-value>,<translation-value>,<length>): 指定 对 象 的 3D 平移。 第 1 个 参 | 
数 对 应 义 轴 ， 第 2 个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 | 
参数 <translation-value> 表 示 <length> 或 <percentage>， 即 X 轴 和 YY 轴 可 以 取 值 长 度 值 或 百分比 ， | 
但 是 Z 轴 只 能 够 设置 长 度 值 。 
【示例 】 下 面 示例 设计 图 像 在 3D 空间 中 平移 ， 设 计 一 种 错位 效果 ， 如 图 16.6 所 示 。 | 
#box { | 
transform-style: preserve-3d:; | 
perspective: 1200px:; 











四 办 国名 


} 
img.change { 
border: solid 1px Ted: | 
transform: translate3d(200px, 30px, 60px): | 
下 | 





图 16.6 定义 3D 平移 效果 
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从 图 16.6 效果 可 以 看 出 ， 当 Z 轴 值 越 大 时 ， 元 素 离 浏览 者 更 近 ， 从 视觉 上 元 素 就 变 得 更 大 ， 反 

之 其 值 越 小 时 ， 元 素 也 离 浏览 者 更 远 ， 从 视觉 上 元 素 就 变 得 更 小 。 

， 窟 提 示 ，translateZ0 函 数 在 实际 使 用 中 等 效 于 translate3d(0.0.tz)。 仅 从 视觉 效果 上 看 ，translateZ0 

| 和 translate3d(0,0,t) 函 数 功 能 非常 类 似 于 二 维 空间 的 scale0) 缩 放 函 数 , 但 实际 上 完全 不 同 。 

translateZ0 和 translate3d(0,0,tz) 变 形 是 发 生 在 Z 轴 上 ， 而 不 是 义 轴 和 YY 轴 。 





| 16.1.8 定义 3D 缩放 


3D 缩放 主要 包括 下 面 4 个 函数 : 
scalex(<number>): 指定 对 象 义 轴 的 (水 平方 向 ) 缩放 。 
回 ”scaley(<number>): 指定 对 象 Y 轴 的 (垂直 方向 ) 缩放 。 
回 ”scalez(<number>): 指定 对 象 的 Z 轴 缩 放 。 
回 scale3d(<number>,<number>,.<number>): 指定 对 象 的 3D 缩放。 第 1 个 参数 对 应 义 轴 ， 第 2 
个 参数 对 应 立轴 ， 第 3 个 参数 对 应 Z 轴 ， 参 数 不 允 许 省 略 。 
参数 <number> 为 一 个 数字 ， 表 示 缩 放 倍数 ， 可 参考 2D 缩放 参数 说 明 。 
【示例 】 下 面 以 16.1.2 节 示例 为 基础 , 在 X 轴 和 Y 轴 放大 图 像 1.5 倍 ，Z 轴 放 大 图 像 2 倍 ， 然 后 
| 使 用 translatex0 把 变形 的 图 像 移 到 右 侧 显 示 ， 以 便 与 原 图 进行 比较 ， 演 示 效 果 如 图 16.7 所 示 。 
img.change { 
border: solid 1px red; 
transform: scale3D(1.5.1.5.2) translatex(240px): 





} 





图 16.7 定义 3D 缩放 效果 


16.1.9 定义 3D 旋转 


3D 旋转 主要 包括 下 面 4 个 函数 : 

Totatex(<angle>): 指定 对 象 在 X 轴 上 的 旋转 角度 。 

rotatey(<angle>): 指定 对 象 在 Y 轴 上 的 旋转 角度 。 

Totatez(<angle>): 指定 对 象 在 Z 轴 上 的 旋转 角度 。 
rotate3d(<number>,<number>,<number>,<angle>): 指定 对 象 的 3D 旋转 角度 ， 其 中 前 3 个 参 
数 分 别 表示 旋转 的 方向 六 、Y、Z， 第 4 个 参数 表示 旋转 的 角度 ， 参 数 不 允 许 省 略 。 
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屋 提示 ，rotate3d0 函 数 前 3 个 参数 值 分 别 用 来 描述 固 绕 义 、Y、Z 轴 族 转 的 矢量 值 。 最 终 变形 元 素 | 
沿 着 由 (0,0,0) 和 (x,y,z) 这 两 个 点 构成 的 直线 为 轴 ， 进 行 旋转 。 当 第 4 个 参数 为 正 数 时 ， 元 

素 进 行 顺 时 针 旋转 ; 当 第 4 个 参数 为 负数 时 ， 元 素 进行 逆 时 针 旋 转 。 | 


rotate3d0 函 数 可 以 与 前 面 3 个 旋转 函数 进行 转换 ， 简 单 说 明 如 下 : 
rotatex(a) 函 数 功 能 等 同 于 rotate3d(1,0,0,a)。 
回 rotatey(a) 函 数 功 能 等 同 于 rotate3d(0,1,0,a)。 
回 rotatez(a) 函 数 功 能 等 同 于 rotate3d(0,0,1,a)。 | 
【示例 】 以 上 面 示例 为 基础 ， 使 用 rotate3d0 函 数 顺 时 针 旋 转 图 像 45 度 ， 其 中 义 轴 、Y 轴 和 ZZ wl 
比值 为 2、2、1， 效 果 如 图 16.8 所 示 。 
img.change { 
border: solid 1px red; 
transform: rotate3d(2,2,1,45deg): 





} 





图 16.8 定义 3D 旋转 效果 
16.2 设计 过 渡 动 画 


CSS 过 渡 动 画 可 以 设计 网 页 对 象 的 样式 变化 持续 一 个 过 程 ,而 不 是 两 种 样式 瞬间 切换 。 CSS 过 渡 | 
动画 目前 获得 所 有 浏览 器 的 支持 。 


16.2.1 设置 过 渡 属 性 


transition-property 属性 用 来 定义 过 渡 动画 的 CSS 属性 名 称 ， 基 本 语法 如 下 所 示 : 
transition-property:none | all | [ <IDENT> ] [<IDENT> ]*: 

取 值 简单 说 明 如 下 : 

none: 表示 没有 元 素 。 

all: 默认 值 ， 表 示 针 对 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 





“351° 


| Er < An ( 微 课 精 编 版 ) 
和 





| IDENT: 指定 CSS 属性 列表 。 几 乎 所 有 色彩 、 大 小 或 位 置 等 相关 的 CSS 属性 ， 包 括 许多 新 
| 添加 的 CSS3 属性 ， 都 可 以 应 用 过 渡 ， 如 CSS3 变换 中 的 放大 、 缩 小 、 旋 转 、 斜 切 、 渐 变 等 。 
| 【示例 】 在 下 面 示例 中 ， 指 定 动画 的 属性 为 背景 色 。 这 样 当 和 鼠标 经 过 盒子 时 ,会 自动 从 红色 背景 
全 站 | 过 渡 到 蓝 色 背景 ， 演 示 效 果 如 图 16.9 所 示 。 
| <style type="text/css"> 
margin: 10px auto height: 8Opx: 
background: red; 
border-radius: 12px: 
| box-shadow: 2px 2px 2px #999; 
} 
| div:hover { 
| background-color: blue: 
/指定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color' 


} 
</style> 








<div></div> 





鼠标 经 过 时 被 旋转 
16.9 定义 简单 的 背景 色 切 换 动画 


16.2.2 ”设置 过 渡 时 间 
transition-duration 属性 用 来 定义 转换 动画 的 时 间 长 度 ， 基 本 语法 如 下 所 示 : 


transition-duration:<time> [. <time>]*; 

| 初始 值 为 0， 适 用 于 所 有 元 素 ， 以 及 :before 和 :after 伪 元 素 。 在 默认 情况 下 ， 动 画 过 渡 时 间 为 0 
| 秒 ， 所 以 当 指 定 元 素 动画 时 会 看 不 到 过 渡 的 过 程 ， 直 接 看 到 结果 。 

| 【示例 】 以 16.2.1 节 示例 为 例 ， 下 面 示例 设置 动画 过 渡 时 间 为 2 秒 ， 当 鼠标 移 过 对 象 时 ， 会 看 到 

| 背景 色 从 红色 逐渐 过 渡 到 蓝 色 ， 演 示 效 果 如 图 16.10 所 示 。 

| div:hover { 

| backeround-color: blue: 

人 # 指 定 动画 过 渡 的 CSS 属性 */ 

transition-property: backeround-color: 

片 指定 动画 过 渡 的 时 间 */ 

transition-duration:2s: 
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DD localhost:s080/" x 卫生 
C | © localhost:8080/my: 


图 16.10 设置 动画 时 间 
16.2.3 ”设置 延迟 过 渡 时 间 


transition-delay 属性 用 来 定义 开启 过 渡 动 画 的 延迟 时 间 ， 基 本 语法 如 下 所 示 : 
transition-delay:<time> [, <time>]*: | 
初始 值 为 0，， 适 用 于 所 有 元 素 ， 以 及 :before 和 :after 伪 元 素 。 设 置 时 间 可 以 为 正 整 数 、 负 整数 和 | 
零 ， 非 零 的 时 候 必须 设置 单位 是 s( 秒 ) 或 者 ms (毫秒 )， 为 负数 的 时 候 ， 过 渡 的 动作 会 从 该 时 间 点 | 
开始 显示 ， 之 前 的 动作 被 截断 。 为 正 数 的 时 候 ， 过 渡 的 动作 会 延迟 触发 。 | 
【示例 】 以 16.2.1 节 示 例 为 基础 进行 介绍 ， 下 面 示例 设置 过 渡 动 画 推 迟 2 秒 钟 后 执行 ， 则 当 鼠 标 
移 过 对 象 时 会 看 不 到 任何 变化 ， 过 了 2 秒 钟 之 后 才 发 现 背 景色 从 红色 逐渐 过 渡 到 蓝 色 。 | 
div:hover { 
background-color: blue: 
/指定 动画 过 渡 的 CSS 属性 */ | 
transition-property: background-color: | 
/指定 动画 过 渡 的 时 间 */ | 
transition-duration: 2s: 
人 指定 动画 延迟 触发 */ 
transition-delay: 2s; 














} 


16.2.4 ”设置 过 渡 动 画 类 型 
transition-timing-function 属性 用 来 定义 过 渡 动画 的 类 型 ， 基 本 语法 如 下 所 示 : 
transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>. <number>, | 
<number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,<number>, | 
<number>)]* 
属性 初始 值 为 ease， 取 值 简单 说 明 如 下 : 
ease: 平滑 过 渡 ， 等 同 于 cubic-bezier(0.25, 0.1, 0.25, 1.0) 函 数 ， 即 立方 贝 塞 尔 。 | 
linear: 线性 过 渡 ， 等 同 于 cubic-bezier(0.0, 0.0, 1.0, 1.0) 函 数 。 | 
ease-in: 由 慢 到 快 ， 等 同 于 cubic-bezier(0.42, 0, 1.0, 1.0) 函 数 。 | 
ease-out: 由 快 到 慢 ， 等 同 于 cubic-bezier(0, 0, 0.58, 1.0) 函 数 。 
ease-in-out: 由 慢 到 快 再 到 慢 ， 等 同 于 cubic-bezier(0.42, 0, 0.58, 1.0) 函 数 。 
cubic-bezier: 特殊 的 立方 贝 塞 尔 曲 线 效果 。 | 
示例 】 以 16.2.1 节 示 例 为 基础 进行 介绍 ， 下 面 设置 过 渡 类 型 为 线性 效果 ， 代 码 如 下 所 示 : L 
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| div:hover { 

| background-color: blue: 

| 

| 人 # 指 定 动画 过 渡 的 CSS 属性 */ 
transition-property: background-color: 
人 # 指 定 动画 过 渡 的 时 间 所 
transition-duration: 10s; 

必 指 定 动画 过 渡 为 线性 效果 */ 
transition-timing-function: linear; 


| 名 A 从 入 门 到 精通 ( 微 课 精 编 版 ) 


CSS3 过 渡 动画 一 般 通 过 动态 伪 类 触发 ， 如 表 16.1 所 示 。 





表 16.1 CSS 动态 伪 类 


动态 伪 类 说 明 

| :link 未 访问 的 链接 

| :Visited 访问 过 的 链接 

| :hover 鼠标 经 过 元 素 
:active 鼠标 单 击 元 素 
:focus 元 素 被 选中 





也 可 以 通过 JavaScript 事件 触发 ， 包 括 click、focus、mousemove、mouseover、mouseout 等 。 


1. :hover 
| 最 常用 的 过 渡 触 发 方式 是 使 用 :hover 伪 类 。 
| 【示例 1】 下 面 示例 设计 当 鼠 标 经 过 div 元 素 时 , 该 元 素 的 背景 色 会 在 经 过 1 秒 钟 的 初始 延迟 后 ， 
| 于 2 秒 钟 内 动态 地 从 绿色 变 为 蓝 色 。 
下 
| <style type="text/css"> 
div{ 
margin: 10px auto; 
| height: 80px: 
| border-radius: 12px: 
| box-shadow: 2px 2px 2px #999: 
background-color: red: 
transition: background-color 2s ease-in 1s: 
} 
| div:hover { background-color: blue} 
| </style> 
| <div></div> 


2. :active 
| :active 伪 类 表示 用 户 单 击 某 个 元 素 并 按 住 鼠标 按钮 时 显示 的 状态 。 
| 【示例 2】 下 面 示 例 设计 当 用 户 单 击 div 元 素 时 ， 该 元 素 被 激活 ， 这 时 会 触发 动画 ， 高 度 属性 从 
| 200px 过 渡 到 400px。 如 果 按 住 该 元 素 ， 保 持 住 活动 状态 ， 则 div 元 素 始终 显示 400px 高 度 ， 松 开 鼠 
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标 之 后 又 会 恢复 原来 的 高 度 ， 如 图 16.11 所 示 。 








默认 状态 单 击 
图 16.11 定义 激活 触发 动画 


3. :focus 


:focus 伪 类 通常 会 在 表单 对 象 接收 键盘 响应 时 出 现 。 
【示例 3】 下 面 设 计 当 输入 框 获取 焦点 时 ， 输 入 框 的 背景 色 逐 步 高 亮 显 示 ， 如 图 16.12 所 示 。 
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| <input type="text" id="name" name="name" > 
| </label> 

| <label for="pass"> 密 码 

<input type="password" id="pass" name="pass" > 





图 16.12 定义 获取 焦点 触发 动画 
肉 提示 : 把 :hover 伪 类 与 :focus 配合 使 用 ， 能 够 丰富 鼠标 用 户 和 键盘 用 户 的 体验 。 


4. :checked 

:checked 伪 类 在 发 生 这 种 状况 时 触发 过 渡 。 

【示例 4】 下 面 示例 设计 当 复 选 框 被 选中 时 缓慢 缩 进 2 个 字符 ， 演 示 效 果 如 图 16.13 所 示 。 
<style type="text/css"> 


| label.name { 

| display: block: 

| nm 站 
| ; margin: 6px 2px; 


inputltype="text"], inputltype="password"] { 


lg: 4px; 
| border: solid 1px #ddd; 
| 
| 
| input[type="checkbox"] { transition: margin 1s ease:} 
input[type="checkbox"]:checked { margin-left: 2em:} 
</style> 
<form id=fim-form action="" method=post> 
| <fieldset> 
| <legend> 用 户 登录 </legend> 
| <label class="name" for="name"> 姓 名 
<input type="text" id="name" name="name" > 
</label> 
| <p> 技 术 专 长 <br> 
| <label> 
| <input type="checkbox" name="web" value="html" id="web_0"> 
| HIML</label><br> 
<label> 
<input type="checkbox" name="web" value="css" id="web_1"> 
Css</label><br> 
<label> 
<input type="checkbox" name="web" value="javascript' id="web 2"> 
JavaScript</label><br> 
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图 16.13 定义 被 选中 时 触发 动画 
5. 媒体 查询 
触发 元 素 状态 变化 的 另 一 种 方法 是 使 用 CSS3 媒体 查询 。 
【示例 S】 下 面 示例 设计 div 元 素 的 宽度 和 高 度 为 49%X200px, 如 果 用 户 将 窗口 大 小 调整 到 420px 
或 以 下 ， 则 该 元 素 将 过 渡 为 100%X100px。 也 就 是 说 ， 当 窗口 宽度 变化 经 过 420px 的 阔 值 时 ， 将 会 触 
发 过 渡 动 画 ， 如 图 16.14 所 示 。 








当 窗 口 小 于 等 于 420px 宽度 当 窗 口 大 于 420px 宽度 
图 16.14 设备 类 型 触发 动画 
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| 如 果 网 页 加 载 时 用 户 的 窗口 大 小 是 420px 或 以 下 ,浏览 器 会 在 该 部 分 应 用 这 些 样式 , 但 是 由 于 不 
| 会 出 现状 态 变化 ， 因 此 不 会 发 生 过 渡 。 
| 6. JavaScript 事件 


全 ~ 【示例 6】 下 面 示例 可 以 使 用 纯粹 的 CSS 伪 类 触发 过 渡 , 为 了 方便 用 户 理解 , 这 里 通过 jQuery 脚 


De 
| <Scripttype= "textbjavascript" src="images/iquery-1.10.2.is"></script> 
| <script type="text/javascript"> 
Smction0 { 
| S$("#button").click(functionO| { 
| $(".box").toggleClass("change"): 
| 
| 
| 


width: 50%: height: 100px: 

transition: width 2s ease. height 2s ease: 
} 
‘Change { width: 100%; height: 120px:} 
</style> 
<input type="button" id="button" value=" 触 发 过 渡 动画 " /> 
<div class="box"></div> 
| 在 文档 中 包含 一 个 box 类 的 盒子 和 一 个 按钮 ， 当 单 击 按钮 时 , jQuery 脚本 都 会 将 合子 的 类 切换 为 

change， 从 而 触发 过 渡 动 画 ， 演 示 效 果 如 图 16.15 所 示 。 





bal -SB hp/ocalho.. ac ecroa € SH @ localhost 
衣 必 过 济 动 画 














回 
基 旧 划 汪 默认 状态 JavaScript 事件 激活 状态 
16.15 ”使 用 JavaScript 脚本 触发 动画 


上面 演示 了 样式 发 生变 化 会 导致 过 滤 动 画 ， 也 可 以 通过 其 他 方法 触发 这 些 更 改 ， 包 括 通过 
| Javaseript 脚本 动态 更 改 。 从 执行 效率 来 看 ， 事 件 通常 应 当 通过 Javaseript 触发 简单 动画 或 过 渡 则 应 
”使 用 CSS 触发。 

| 
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16.3 设计 帧 动画 
上 
, , , 
Css3 关键 帧 动画 能 够 模拟 Flash 动画 的 实现 效果 ， 允 许 用 户 控制 过 渡 动 画 的 过 程 。 日 前 最 新 版 ， 
本 的 主流 浏览 器 都 支持 CSS 帧 动画 。 
16.3.1 设置 关键 帧 
CSS3 使 用 @keyframes 定义 关键 帧 。 具 体 用 法 如 下 所 示 : 




















@keyframes animationname { 
keyframes-selector { 
CSS-Styles: 

} 
} 


其 中 参数 说 明 如 下 : | 
回 animationname: 定义 动画 的 名 称 。 | 
回 ”keyframes-selector: 定义 帧 的 时 间 未 知 ， 也 就 是 动画 时 长 的 百分比 , 合法 的 值 包括 0 一 100%、 | 
from (等 价 于 0%) 、to (等 价 于 100%) 。 | 
加 ess-styles: 表示 一 个 或 多 个 合法 的 CSS 样式 属性 。 | 
在 动画 过 程 中 ， 用 户 能 够 多 次 改变 这 套 CSS 样式 。 以 百分比 来 定义 样式 改变 发 生 的 时 间 , 或 者 | 
通过 关键 词 fom 和 to。 为 了 获得 最 佳 浏览 器 支持 , 设计 关键 帧 动画 时 应 该 始终 定义 0 和 100% 位 置 帧 。 | 
最 后 ， 为 每 帧 定义 动态 样式 ， 同 时 将 动画 与 选择 器 绑 定 。 | 
【示例 】 下 面 示例 演示 如 何 让 一 个 小 方 盒 沿 着 方形 框 内 壁 匀速 运动 ， 效 果 如 图 16.16 所 示 。 
<style> 
#wrap {/* 定义 运动 轨迹 包含 框 */ 
position:relative: 庆 定义 定位 包含 框 ， 避 免 小 盒子 跑 到 外 面 运 动 */ | 
border:solid 1px red: | 
‘width:250px; height:250px: | 


} 

#box {/* 定义 运动 小 盒 的 样式 */ 
position:absolute: 
left:0: top:0: | 
width: 50px: height: 50px: | 
background: #93FB40: | 
border-radius: 8px: 
box-shadow: 2px 2px 2px #999: 
必定 义 帧 动画 : 名 称 为 ball， 动 画 时 长 为 5 秒 ， 动 画 类 型 为 匀速 渐变 ， 动 画 无 限 播放 */ 
animation: ball Ss linear infinite: 


} 
必定 义 关键 帧 ， 共 包括 5 帧 ， 分 别 在 总 时 长 99%8、25%、50%、75%、100% 的 位 置 */ 


上 每 帧 中 设置 动画 属性 为 left 和 top， 让 它们 的 值 匀速 渐变 ， 产 生 运 动 动画 */ 
@keyframes ball { 

0% {left:0:top:0:} 

25% {left:200px:top:0:} 

50% {left:200px:top:200px:} 
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| 75% {left:0:top:200px:} 
| 100% {left:0:top:0:} 
| 
| 


ELo.s- -sc|sc “ 国 








图 16.16 设计 小 盒子 运动 动画 
16.3.2 ”设置 动画 属性 
| Animations 功能 与 Transition 功能 相同 ， 都 是 通过 改变 元 素 的 属性 值 来 实现 动画 效果 。 它 们 的 区 
| 别 在 于 : 使 用 Transition 功能 时 只 能 通过 指定 属性 的 开始 值 与 结束 值 ， 然 后 在 这 两 个 属性 值 之 间 进 行 
| 平滑 过 渡 的 方式 来 实现 动画 效果 ， 因 此 不 能 实现 比较 复杂 的 动画 效果 ， 而 Animations 则 通过 定义 多 
| 个 关键 帧 以 及 定义 每 个 关键 帧 中 元 素 的 属性 值 来 实现 更 为 复杂 的 动画 效果 。 
1. 定义 动画 名 称 
使 用 animation-name 属性 可 以 定义 CSS 动画 的 名 称 ， 语 法 如 下 所 示 : 
animation-name:none |IDENT [.none|IDENT ]*: 
| 初始 值 为 none， 定 义 一 个 适用 的 动画 列表 。 每 个 名 字 是 用 来 选择 动画 关键 帧 ， 提 供 动画 的 属性 
| 值 。 如 名 称 是 none， 那 么 就 不 会 有 动画 。 

2. 定义 动画 时 间 

使 用 animation-duration 属性 可 以 定义 CSS 动画 播放 时 间 ， 语 法 如 下 所 示 : 

animation-duration:<time> [. <time>]*#: 

在 默认 情况 下 该 属性 值 为 0， 这 意味 着 动画 周期 是 直接 的 ， 即 不 会 有 动画 。 当 值 为 负 值 时 ， 则 被 
视 为 0。 

3. 定义 动画 类 型 

使 用 animation-timing-function 属性 可 以 定义 CSS 动画 类 型 ， 语 法 如 下 所 示 : 


animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubicbezier(<number>. <number>. 
number>. <number>) [. ease | linear lease-in | ease-out | ease-in-out | cubic-bezier(<number>. <number>.<number>、 
<number>)]* 


初始 值 为 ease， 取 值 说 明 可 参考 16.2.4 节 介 绍 的 过 渡 动 画 类 型 。 
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4 定义 延迟 时 间 | 

使 用 animation-delay 属性 可 以 定义 CSS 动画 延迟 播放 的 时 间 ， 语 法 如 下 所 示 : 
animation-delay:<time> [. <time>]*: | 
该 属性 允许 一 个 动画 开始 执行 一 段 时 间 后 才 被 应 用 。 当 动画 延迟 时 间 为 0, 即 默认 动画 延迟 时 间 ， 
则 意味 着 动画 将 尽快 执行 ， 否 则 该 值 指定 将 延迟 执行 的 时 间 。 
5. 定义 播放 次 数 | 
使 用 animation-iteration-count 属性 定义 CSS 动画 的 播放 次 数 ， 语 法 如 下 所 示 : 
animation-iteration-count:infinite | <number> [ infinite | <number>]*: | 
默认 值 为 1， 这 意味 着 动画 将 从 开始 到 结束 播放 一 次 。infinite 表示 无 限 次 ， 即 CSS 动画 永远 重 
复 播放 。 如 果 取 值 为 非 整 数 ， 将 导致 动画 结束 一 个 周期 的 一 部 分 。 如 果 取 值 为 负 值 ， 则 将 导致 在 交 蔡 | 
周期 内 反 向 播放 动画 。 | 
6. 定义 播放 方向 | 
使 用 animation-direction 属性 定义 CSS 动画 的 播放 方向 ， 基 本 语法 如 下 所 示 : 
animation-direction:normal | alternate [, normal | altemate]*: | 
默认 值 为 normal。 当 为 默认 值 时 ， 动 画 的 每 次 循环 都 向 前 播放 。 另 一 个 值 是 alternate， 设 置 该 值 
则 表示 第 偶数 次 向 前 播放 ， 第 奇数 次 向 反方 向 播放 。 
| 
| 
| 
【 





7. 定义 播放 状态 
使 用 animation-play-state 属性 定义 动画 正在 运行 ， 还 是 暂停 ， 语 法 如 下 所 示 : 
animation-play-state: paused|running: 
初始 值 为 mnning。 其 中 paused 定义 动画 已 暂停 ，running 定义 动画 正在 播放 。 | 
肉 提示 : 可 以 在 JavaScript 中 使 用 该 属性 ， 这 样 就 能 在 播放 过 程 中 暂停 动画 。 在 JavaScript 脚本 中 
用 法 如 下 : 
object.style.animationPlayState="paused" 
8. 定义 播放 外 状态 | 
使 用 animation-fill-mode 属性 定义 播放 外 状态 ， 语 法 如 下 所 示 : 
animation-fill-mode: none | forwards | backwards | both [ . none | forwards | backwards | both ]* | 
初始 值 为 none， 如 果 提 供 多 个 属性 值 ， 以 逗号 进行 分 隔 。 取 值 说 明 如 下 : 
none: 不 设置 对 象 动画 之 外 的 状态 。 | 
forwards: 设置 对 象 状态 为 动画 结束 时 的 状态 。 | 
backwards: 设置 对 象 状态 为 动画 开始 时 的 状态 。 
both: 设置 对 象 状态 为 动画 结束 或 开始 的 状态 。 
【示例 】 下 面 示例 设计 一 个 小 球 ， 并 定义 它 水 平 向 左 运动 ， 动 画 结束 之 后 ， 再 返回 起 始点 位 置 ， 
效果 如 图 16.17 所 示 。 
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| 
| 
| 店 启 动 运动 的 小 球 ， 并 定义 动画 结束 后 返回 */ 
| 


} 

让 定义 小 球 水 平 运动 关键 帧 */ 

| @keyframes ball{ 

| 0% {transform:translate(0,0):} 

| 2 100% {transform:translate(400px):} 
| <syle> 

<div class="ball"></div> 





图 16.17 设计 运动 小 球 最 后 返回 起 始点 位 置 
16.4 案例 实战 


本 节 将 通过 多 个 案例 帮助 读者 上 机 练习 和 提升 CSS3 动画 设计 技法 。 
16.4.1 设计 动画 菜单 


| 本 例 利用 CSS3 过 渡 动 画 设计 一 个 界面 切换 的 导航 菜单 ， 当 鼠标 经 过 菜单 项 时 ， 会 以 动画 形式 从 
| 中 文 界面 缓慢 翻转 到 英文 界面 ， 或 者 从 英文 界面 翻转 到 中 文 界面 ， 效 果 如 图 16.18 所 示 。 





[re 





示例 效果 16.18 ”设计 动画 翻转 菜单 样式 


【操作 步骤 】 
第 1 步 , 设计 菜单 结构 .在 每 个 菜单 项 (<div class="menul"> ) 中 包含 两 个 子 标 签 :<div class="one"> 
| 和 <div class="two">， 设 计 菜 单项 仅 显示 一 个 子 标签 ， 当 鼠标 经 过 时 ， 翻 转 显示 另 一 个 子 标签 。 
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<div> 
<div class="menul"> | 
<div class="one"><a hre 人 "> 首页 </a></div> | 

<div class="two"><a href="#">Home</a></div> | 


Si 鳃 





<div class="menul"> | 
<div class="one"><a href="#"> 新 闻 </a></div> 
<div class="two"><a hre—="#">News</a></div> | 

Adiv> | 

<div class="menul"> | 


<div class="one"><a href="#"> 关 于 </a></div> 
<div class="two"><a hre 人 ="#">About</a></div> 
</div> 
</div> 
第 2 步 ， 设 计 菜单 项 的 样式 : 固定 大 小 、 相 对 定位 ， 禁 止 内 容 溢出 容器 ， 向 左 浮动 ， 定 义 并 列 
显示 。 


.menul { 
width: 100px: height: 30px: | 
position: relative: | 
font-family: 微软 雅 黑 ; font-size: 12px: color: #fEF | 
overflow: hidden; | 
float: left; | 
} | 


| 
第 3 步 ， 设 计 每 个 菜单 项 中 子 标签 <div class="one"> 和 <div class="two"> 的 样式 。 定 义 它们 与 菜 | 
单项 相同 大 小 ， 这 样 就 只 能 够 显示 一 个 子 标签 : 为 了 方便 控制 ， 定 义 它们 为 绝对 定位 ， 包 含 文本 水 平 | 
居中 和 垂直 居中 ， 最 后 定义 过 渡 动 画 时 间 为 0.3 秒 ， 加 速 到 减速 显示 。 | 
menul div { 
‘width: 100px: height: 30px: 
line-height: 30px: text-align: center: 
position: absolute: 
transition: all 0.3s ease-in-out: 
} 
第 4 步 ， 设 计 过 渡 动 画 样式 。 本 例 设计 过 渡 演 示 属 性 为 left、top 和 bottom， 当 鼠标 经 过 时 ， 改 
变 定 位 属性 的 值 ， 实 现 菜 单项 动态 翻转 效果 。 


menul .one { 

top: 0: left: 0: 

z-index: 1: 

backsground: #63C: color: #FFF: | 
} | 
.menul:hover .one { top: -30px: left: 0:} | 
menul .two { 

bottom: -30px: left: 0: 

z-index: 2; 

background: #f50: color: #EFF: 


| 
} | 
| 

.menul :hover .two { bottom: Opx: left: 0:} 四 
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16.4.2 绘制 3D 盒子 


全 站 【示例 1】 下 面 示例 使 用 2D 多 重 变换 制作 一 个 正方 体 ， 演 示 效 果 如 图 16.19 所 示 。 
SB <style type="text/css"> 


body {padding:20px 0 0 100px:} 
| side{ 
| height: 100px: width: 100px: 
position: absolute; 
font-size: 20px: font-weight: bold; line-height: 100px: text-align: center: color: #fEF 
text-shadow: 0 -1px 0 rgba(0.0.0,0.2); 
text-transform: Uppercase: 








} 
-top {/* 顶 面 */ 
background: red: 
transform: rotate(-45deg) skew(15deg, 15deg); 


} 
.left {/* 左 侧面 */ 
background: blue; 
transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%): 


} 

-Tight {/* 右 侧面 */ 

| background: green: 

| transform: rotate(-15deg) skew(-15deg. -15deg) translate(5096. 100%): 
| } 

</style> 

<div class="side top"> 顶 面 </div> 

<div class="side left"> 左 侧面 </div> 
<div class="side right"> 右 侧面 </div> 





图 1619 设计 2D 变换 盒子 
| 【示例 2】 下 面 示例 使 用 3D 多 重 变换 制作 一 个 正方 体 ， 演 示 效 果 如 图 16.20 所 示 。 
| 
| <style type="text/css"> 
| -stage {/* 定 义 画 布 样式 */ 
width: 300px: height: 300px: margin: 100px auto: position: Telative: 
perspective: 300px: 





| } 

| 上 # 定 义 盒子 包含 框 样式 */ 

| .Container { transform-style: preserve-3d:} 
让 定义 盒子 六 面 基 本 样式 */ 
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‘side { 
backeround: rgba(255.0.0.0.3): 
border: 1px solid red: 
font-size: 60px: font-weight: bold: color: #ffF: text-align: center: 
height: 196px: line-height: 196px: width: 196px: 
position: absolute; 
text-shadow: 0 -lpx 0 rgba(0.0.0.0.2): 
text-transform: uppercase; 





} 
.front {/* 使 用 3D 变换 制作 前 面 */ | 
transform: translateZ(100px): | 


} 
.back {/* 使 用 3D 变换 制作 后 面 */ 
transform: rotateX(180deg) translateZ(100px): 


} 
-left {/* 使 用 3D 变换 制作 左面 */ 
transform: rotateY(-90deg) translateZ(100px): 


} 
-fight {/* 使 用 3D 变换 制作 右面 */ 
transform: rotateY(90deg) translateZ(100px); 


transform: rotateX(90deg) translateZ(100px): 


} 
bottom {/* 使 用 3D 变换 制作 底面 */ 
transform: rotateX(-90deg) translateZ(100px); 
} 
</style> 
<div class="stage"> 
<div class="container"> 
<div class="side front"> 前 面 </div> 
<div class="side back"> 背 面 </div> 
<div class="side left"> 左 面 </div> 
<div class="side right"> 右 面 </div> 
<div class="side top"> 顶 面 </div> 
<div class="side bottom"> 底 面 </div> 
</div> 
</div> 


| 
| 
| 
| 
| 
| 
| 
:top {/* 使 用 3D 变换 制作 项 面 */ | 
| 
| 
| 
| 
| 
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图 1620 设计 3D 盒子 本 人 全 党 
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3 设计 旋转 的 3D 盒子 


| 以 16.4.2 节 示 例 为 基础 ， 本 节 示 例 设 计 使 用 animation 属性 设计 盒子 旋转 显示 。 
fA 【示例 1】 本 例 使 用 2D 制作 一 个 正方 体 ， 然 后 设计 它 在 鼠标 经 过 时 沿 Y 轴 旋 转 ， 演 示 效 果 如 
全 图 16.21 所 示 。 
第 1 步 ， 复 制 16.4.2 节 示 例 index1.html。 在 HTML 结构 中 为 盒子 添加 两 层 包含 框 。 
<div class="stage s1"> 
<div class="side top">Top</div> 

| <div class="side left">Left</div> 
| <div class="side right">Right</div> 
| </div> 
| </div> 

第 2 步 ， 在 内 部 样式 表 中 定义 关键 帧 。 
必定 义 关键 帧 动画 */ 
| @keyframes spin{/* 标 准 模式 */ 
| 0% {transform:rotateY (0deg)} 
| 100%{ftransform:rotateY(360deg)} 
| Me 
| 第 3 步 ， 设 计 3D 变换 的 透视 距离 以 及 变换 类 型 ， 即 启动 3D 变换 。 
| 必定 义 盒子 所 在 画布 框 的 样式 */ 
| .Stage { perspective: 1200px:} 
”A 定义 盒子 包含 框 样式 */ 
.Container { transform-style: preserve-3d:} 

第 4 步 ， 定 义 动画 触发 方式 。 
"定义 鼠标 经 过 盒子 时 ， 触 发 线性 变形 动画 ， 动 画 时 间 5 秒 ， 持 续 播放 */ 
.Container:hover{ animation:spin 5s linear infinite:} 
| 本 例 完整 代码 请 参考 本 书 源 代 码 。 
| 【示例 2】 本 例 使 用 3D 制作 一 个 正方 体 ， 然 后 设计 它 在 鼠标 经 过 时 沿 Y 轴 旋 转 ， 演 示 效 果 如 
| 图 16.22 所 示 。 
| 


四 - Swp//hocalho-. ~- SC | Biccshor: 





et 
示 葬 笋 轴 图 16.21 设计 旋转 的 3D 盒子 图 16.22 设计 旋转 的 3D 盒子 
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第 1 步 ， 在 内 部 样式 表 中 定义 关键 帧 。 
人 # 定 义 关键 帧 动画 */ 
@keyframes spin { 

0% {transform:rotateY(0deg)} 

100% {transform:rotateY(360deg)} 
} 
第 2 步 ， 设 计 3D 变换 的 透视 距离 以 及 变换 类 型 ， 即 启动 3D 变换 。 | 
上 # 定 义 画 布 样式 */ | 
.Stage { perspective: 300px: } | 
人 # 定 义 盒子 包含 框 样 式 */ 
.Container { transform-style: preserve-3d: } 
第 3 步 ， 定 义 动画 触发 方式 。 
人 # 定 义 鼠 标 经 过 时 触发 盒子 旋转 动画 */ 
.container:hover { animation: spin 5s linear infinite:} 
本 例 完整 代码 请 参考 本 书 源 代码 。 

16.4.4 ”设计 折 又 面板 


本 案例 使 用 CSS3 的 目标 伪 类 〈:target) 设计 折 释 面板 效果 ， 
属性 设计 滑动 效果 ， 折 邯 动 画 效果 如 图 16.23 所 示 。 





Mae ©)- 3 tp /ccalhos ort hmsone 





图 16.23 设计 折 又 面板 汪汪 


示例 主要 代码 如 下 所 示 : 


<style type="text/css"> 
上 定义 折叠 框 外 框 样式 */ 
.accordion { 

backeround: #eee: 


"367 





EC 到 ee 从 入 门 到 精通 ( 微 裸 精 编 版) 


| border: 1px solid #999: 
| margin: 2em:} 
| 
| 


所 定义 折合 框 标题 栏 样式 */ 


J | -accordion h2 { 
| margin: 0: 
| padding: 12px 0: 
background:#CCC} 
| 上 # 定义 折 县 框 内 容 框 样式 */ 
.accordion .section { 
border-bottom: 1px solid #ccc: 
background: #ffF:} 
谨 定义 折 营 框 选项 标题 栏 样式 */ 
.accordion h3 { 
margin:0; 
padding:0; 
background: #eee: 
padding:3px lem:} 
入 定义 折 营 框 选项 标题 栏 超 链接 样式 */ 
.accordionh3 a { 
font-weight: normal: 
text-decoration:none:} 
族 当 获 得 目标 焦点 时 ， 粗 体 显示 选项 标题 栏 文字 */ 
.accordion :target h3 a { font-weight: bold: } 
谨 选项 栏 标 题 对 应 的 选项 子 框 样式 */ 
.accordion h3 + div { 
height: 0: 
padding:0 lem: 
| overflow: hidden; 
| /定义 过 流 对 象 为 高 度 ， 过 渡 时 间 为 03 秒 ， 浙 显 显示 */ 
| transition: height 0.3s ease-in:} 
.accordion h3 + div img { margin:4px: } 
族 当 获 得 目标 焦点 时 ， 子 选项 内 容 框 样式 */ 
| .accordion :target h3 + div { 
| /# 当 获取 目标 之 后 ， 高 度 为 300 像素 */ 
| height:300px: 
overflow:auto:} 
</style> 
<div class="accordion"> 
| <h2> 我 爱 买 <h2> 
| <div id="one" class="section"> 
| <h3> <a hre 仁 "#one"> 爱 输 </a> </h3> 
<div><img src="images/11.png"></div> 
</div> 
| <div id="two" class="section"> 
| <h3> <a hre 仁 "#two"> 爱 美丽 </a> </h3> 
| <div><img stc="images/22 .png"></div> 
| </div> 
<div id="three" class="section"> 
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<h3> <a hre 全 "#three"> 爱 吃 </a> </h3> 
<div><img src="images/33.pne"></div> 
</div> 
</div> 


16.5 在 线 练 习 


练习 CSS3 动画 一 般 设计 方法 ， 培 养 灵活 应 用 交互 式 动态 样式 的 基本 能 力 。 
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JavaScript 基础 


JavaScript 是 一 种 轻 量 级 、 解 释 型 的 Web 开发 语言 ， 获 得 了 所 有 浏览 器 的 支持 ， 是 目前 广 
泛 使 用 的 编程 语言 之 一 。 本 章 将 简单 介绍 JavaScript 的 历史 、 基 本 语法 和 用 法 


【 学 习 要 点 】 


| 


总 各 吾 吾 


正确 使 用 变量 

灵活 使 用 表达 式 和 运算 符 
正确 使 用 语句 

使 用 函数 、 对 象 、 数 组 

了 解 函 数 、 对 象 和 数组 的 基本 方法 


第 17 章 .JavaScript 基础 SS | 


17.1 JavaScript 历史 


1995 年 2 月 ，Netscape 公司 发 布 Netscape Navigator 2 浏览 器 , 并 开发 了 一 种 名 为 LiveScript 的 脚 | 

本 语言 ， 这 是 最 初 的 JavaScript 1.0 版 本 。 
在 Netscape Navigator 3 中 又 发 布 了 JavaScript 1.1 版 本 .微软 在 Intermet Explorer 3 中 加 入 JavaScript | 
脚本 语言 ， 并 命名 为 JScript。 | 
1997 年 ， 欧 洲 计算 机 制造 商 协会 (ECMA) 以 JavaScript 1.1 为 蓝本 制定 了 ECMA-262 的 新 脚本 | 
语言 的 标准 ， 并 命名 为 ECMAScript。 | 
1998 年 ， 国 际 标准 化 组 织 和 国际 电工 委员 会 (ISO/IEC〉 也 采用 了 ECMAScript 作为 标准 〈 即 | 
ISO/TEC-16262)。 自 此 以 后 ， 浏 览 器 开发 商 就 开始 致力 于 将 ECMAScript 作为 各 自 JavaScript 实现 的 | 
| 





参考 标准 。 

因此 , ECMAScript 和 JavaScript 的 关系 是 : ECMAScript 是 JavaScript 语言 的 国际 标准 , JavaScript | 
是 ECMAScript 的 一 种 实现 。 | 

1998 年 6 月 ，ECMAScript 2.0 版 发 布 。 | 

1999 年 12 月 ，ECMAScript 3.0 版 发 布 ， 成 为 JavaScript 的 通用 标准 ， 获 得 了 广泛 支持 。 | 

2007 年 10 月 ，ECMAScript 4.0 版 草案 发 布 ， 对 3.0 版 做 了 大 幅 升 级 。 由 于 4.0 版 的 目标 过 于 激 | 
进 ， 各 方 对 于 是 否 通过 这 个 标准 产生 了 严重 分 歧 。 

2008 年 7 月 ，ECMA 中 止 ECMASeript 4.0 的 开发 ， 将 其 中 涉及 现 有 功能 改善 的 一 小 部 分 发 布 为 
ECMAScript 3.1。 不 久 ，ECMAScript 3.1 改名 为 ECMAScript 5。 

2009 年 12 月 ，ECMAScript 5.0 版 正式 发 布 。 

2011 年 6 月 ，ECMAScript 5.1 版 发 布 ， 并 且 成 为 ISO 国际 标准 (ISO/IEC 16262:2011)。 

2013 年 12 月 ，ECMAScript 6 草案 发 布 。 

2015 年 6 月 ，ECMAScript 6 发 布 正式 版 本 ， 并 更 名 为 ECMAScript 2015。Mozilla 将 在 这 个 标准 
的 基础 上 推出 JavaScript 2.0。 从 此 以 后 ，JavaScript 将 以 年 份 命名 ， 新 版 本 将 按照 “ECMAScript+ 年 
份 ”的 形式 发 布 ， 以 便 更 频繁 地 发 布 包含 小 规模 增 量 更 新 的 新 版 本 。 

ECMAScript 6 是 继 ECMAScript 5 之 后 的 一 次 主要 改进 , 语言 规范 由 ECMAScript 5.1 时 代 的 245 
页 扩充 至 600 页 。 ECMAScript 6 增添 了 许多 必要 的 特性 ， 如 模块 和 类 ， 以 及 一 些 实用 特性 ， 如 Maps、 
Sets、Promises、 生 成 器 〈Generators) 等 。 


17.2 ”在 网 页 中 使 用 JavaScript 


在 HIML 页 面 中 嵌入 JavaScript 脚本 需要 使 用 <scripf> 标 签 ， 在 <scripf 标 签 中 可 以 直接 编写 
JavaScript 代码 。 也 可 以 编写 单独 的 JavaScript 文件 ， 然 后 通过 <scrip 伺 标签 导入 HIML 文档 。 


17.2.1 编写 脚本 


使 用 <scrip 人 > 标签 有 两 种 方式 : 在 页 面 中 嵌入 JavaScript 代码 和 导入 外 部 JavaScript 文件 。 
【示例 1】 直 接 在 页 面 中 嵌入 JavaScript 代码 。 
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| 第 1 步 ， 新建 HTML 文档 ， 保 存 为 test.html。 然 后 在 <head> 标 签 内 插入 一 个 <script> 标 签 。 
| 第 2 步 ， 为 <scrip 人 > 标签 指定 type 属性 值 为 "text/javascript"。 现 代 浏 览 器 默认 <script> 标 签 的 类 型 
| 为 JavaScript 脚本 ， 因 此 省 略 type 属性 ， 依 然 能 够 被 正确 执行 。 
食 内 | 第 3 步 ， 直 接 在 <scrip 伺 标签 内 部 输入 JavaScript 代码 : 
ldoctype html> 
_#te 
| <head> 
| <meta charset="utf-8"> 
| <title>test</title> 
| ‘<script type="text/javascript"> 
| fanctionhi0{ 
| document.write("<h1>Hello, World!</h1>"); 
| 
| 


| 上 面 JavaScript 脚本 先 定义 了 一 个 hi0 函 数 ,该 函数 被 调用 后 会 在 页 面 中 显示 字符 “Hello,World!”。 
| document 表示 DOM 网 页 文档 对 象 ，document.write0 表 示 调 用 Document 对 象 的 write0 方 法 ， 在 当前 
| 网 页 源 代码 中 写 入 HTML 字符 串 “<hl>Hello,World!</h1>”。 

| 调用 hi0 函 数 ， 浏 览 器 将 在 页 面 中 显示 一 级 标题 字符 “Hello,World!”。 

第 4 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 17.1 所 示 。 


| 
| 

| 

| 

| 

| SS Btest 
| 

| Hello,World! 

| 





图 17.1 第 一 个 JavaScript 程序 


【示例 2】 包 含 外 部 JavaScript 文件 。 
第 1 步 ， 新 建文 本 文件 ， 保 存 为 testjs。 注意， 扩展 名 为 js， 它 表示 该 文本 文件 是 JavaScript 类 型 


的 文件 。 

第 2 步 ， 打 开 testjs 文本 文件 ， 在 其 中 编写 下 面 代码 ， 定 义 简单 的 输出 函数 。 
| fnctionhiOf 

| alert("Hello, World!"): 

| 

| } 


| 在 上 面 代码 中 ，alert0 表 示 Window 对 象 的 方法 ， 调 用 该 方法 将 弹出 一 个 提示 对 话 框 ， 显 示 参 数 
| 字符 串 “Hello,World!”。 
| 第 3 步 ， 保 存 JavaScript 文件 ， 注 意 与 网 页 文件 的 位 置 关 系 。 这 里 保存 JavaScript 文件 位 置 与 调 
| 用 该 文件 的 网 页 文件 位 于 相同 目录 下 。 
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第 4 步 ， 新 建 HTML 文档 ， 保 存 为 testlhtml。 然 后 在 <head> 标 签 内 插入 一 个 <script> 标 签 。 定义 | 
src 属性 ， 设 置 属性 值 为 指向 外 部 JavaScript 文件 的 URL 字符 串 。 代 码 如 下 所 示 : 


<script type="text/javascript" src="test.js"></script> 2 
第 5 步 ， 在 上 面 <script> 标 签 下 一 行 继续 插入 一 个 <script> 标 签 ， 直 接 在 <scrip 人 > 标签 内 部 输入 | 


JavaScript 代码 ， 调 用 外 部 JavaSeript 文件 中 的 hi0 函 数 。 
<!doctype html> | 
<html> | 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
<script type="text/javascript" src="test.js"></script> 
‘<script type="text/javascript"> 
hiO0:; /调用 外 部 JavaScript 文件 的 函数 





第 6 步 ， 保 存 网 页 文档 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 17.2 所 示 。 
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图 17.2 调用 外 部 函数 弹出 提示 对 话 框 | 


17.2.2 脚本 位 置 


所 有 <seript> 标 签 都 会 按照 它们 在 HTML 中 出 现 的 先后 顺序 依次 被 浏览 器 解析 在 不 使 用 <script> 。 遇 映 者 
标签 的 defer 和 asyne 属性 的 情况 下 ， 只 有 在 解析 完 前 面 <scrip 人 > 标签 中 的 代码 之 后 ， 才 会 开始 解析 后 | 
面 的 代码 。 

【示例 1】 在 默认 情况 下 ， 所 有 <scripe> 标 签 都 应 该 放 在 页 面 头 部 的 <head> 标 签 中 。 


<!doctype html> 

<head> | 
<meta charset="utf-8"> | 
<title>test</title> 

<script type="text/javascript" src="test.js"></script> 

<script type="text/javascript"> | 
hi0: | 
</script> L 





“313° 





巍 - | 
| 这 样 就 可 以 把 所 有 外 部 文件 (包括 CSS 文件 和 JavaScript 文件 ) 的 引用 都 放 在 相同 的 地 方 。 但 是 ， 
在 文档 的 <head> 标 签 中 包含 所 有 JavaScript 文件 ， 意 味 着 必须 等 到 全 部 JavaScript 代码 都 被 下 载 、 解 


析 和 执行 完成 以 后 ， 才 能 开始 呈现 页 面 的 内 容 。 如 果 页 面 需要 很 多 JavaScript 代码 ， 这 样 无 疑 会 导致 
| 浏览 器 在 呈现 页 面 时 出 现 明显 的 延迟 ， 而 延迟 期 间 的 浏览 器 窗口 中 将 是 一 片 空白 。 

| 【示例 2】 为 了 避免 延迟 问题 ,现代 Web 应 用 程序 一 般 都 把 全 部 JavaScript 引用 放 在 <body> 标 签 
中 页 面 的 内 容 后 面 。 


<title>test</title> 

‘<script type="text/javascript" src="test.js"></script> 

‘<script type="text/javascript"> 
| hi0; 
| </scrip> 
| </body> 
</html> 

这 样 ， 在 解析 包含 的 JavaScript 代码 之 前 ， 页 面 的 内 容 将 完全 呈现 在 浏览 
器 中 ， 同 时 会 感到 打开 页 面 的 速度 加 快 了 。 

【拓展 】 

* <scrip 人 标签 还 有 很 多 高 级 用 法 和 注意 问题 ， 如 果 读 者 想 进一步 探究 ， 可 
是 于 以 扫 码 在 线 阅读 ， 继 续 学 习 。 


17.2.3 脚本 基本 规范 
| 编写 正确 的 JavaScript 脚本 ， 需 要 掌握 最 基本 的 规范 ， 下 面 简单 了 解 一 下 。 
1. 大 小 写 敏 感 


| JavaScript 对 大 小 写 是 非常 敏感 的 。 建 议 用 小 写字 符 命名 变量 ， 对 于 复合 变量 ， 使 用 驼峰 命名 法 
| 命名 ; 对 于 构造 函数 使 用 首 字母 大 写 。 例 如 : 








var Class = functionO{: /声明 类 型 ， 习 惯 首 字母 大 写 
| Var myclass = new Class(): // 声 明 变 量 ， 习 惯 小 写 
2. 格式 化 


| 
| JavaScript 一 般 会 忽略 分 隔 符 ， 如 空格 符 、 制 表 符 和 换行 符 。 在 保证 不 引起 歧义 的 情况 下 ， 用 户 
| 可 以 利用 分 隔 符 对 脚本 进行 格式 化 排版 。 
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3. 代码 注释 

JavaScript 支持 两 种 注释 形式 : 

单行 注释 ， 以 双 斜 杠 来 表示 ， 例 如 : 

/这 是 注释 ， 请 不 要 解析 我 

多 行 注释 ， 以 “/*” 和 “*/” 分 隔 符 进行 标识 ， 例 如 : 

| 

多 行 注释 | 

请 不 要 解析 我 们 

【拓展 】 

本 节 简 单 介绍 了 JavaScript 常见 脚本 规范 ， 作 为 一 门 高 级 语言 ， 实 际 上 它 的 规 
范 是 非常 丰富 的 ， 如 果 读 者 想 进一步 探究 ， 可 以 扫 码 在 线 阅 读 。 


17.3 使 用 变量 








JavaScript 是 一 种 弱 类 型 语言 ， 在 定义 变量 时 不 需要 指定 类 型 ， 一 个 变量 可 以 存储 任何 类 型 的 值 。 | 
在 运算 时 ，JavaScript 能 自动 转换 数据 类 型 。 但 是 在 特定 条 件 下 ， 还 需要 了 解 JavaScript 的 数据 类 型 ， | 
以 及 掌握 数据 类 型 转换 的 基本 方法 。 


17.3.1 声明 变量 
JavaSeript 使 用 var 关键 字 声 明 变量 。 声 明 变量 的 5 种 形式 如 下 : 





Var a; // 声 明 单个 变量 。var 关键 字 与 变量 名 之 间 以 空格 分 隔 

Varb.c: /声明 多 个 变量 。 变 量 之 间 以 逗号 分 隔 | 
var d=1; // 声 明 并 初始 化 变量 。 等 号 左 侧 是 变量 名 ， 等 号 右 侧 是 值 | 
vare=2.f= 3: /声明 并 初始 化 多 个 变量 。 以 逗号 分 隔 多 个 变量 | 
vare=f= 3; /声明 并 初始 化 多 个 变量 ， 且 定义 变量 的 值 相同 


声明 变量 之 后 ， 在 没有 初始 化 之 前 ， 变 量 初始 值 为 undefined (未 定义 的 值 )。 

JavaScript 变量 可 以 分 为 全 局 变量 和 局 部 变量 。 全 局 变量 在 整个 页 面 中 可 见 ， 并 在 页 面 任何 位 置 
被 允许 访问 。 局 部 变量 只 能 在 指定 函数 内 可 见 ， 函 数 外面 是 不 可 见 的 ， 也 不 允许 访问 。 

在 函数 内 部 使 用 var 关键 字 声 明 的 变量 就 是 局 部 变量 ， 该 变量 的 作用 域 仅 限于 当前 函数 体内 , 但 
是 如 果 不 使 用 var 关键 字 定 义 的 变量 则 都 是 全 局 变量 ， 不 管 是 在 函数 内 或 者 函数 外 ， 在 整个 页 面 脚 本 | 
中 都 是 可 见 的 。 

【示例 】 在 下 面 示例 中 ， 当 使 用 var 关键 字 在 函数 内 外 分 别 声明 并 初始 化 变量 a 时 ， 在 不 同 作用 
域内 显示 为 不 同 的 值 。 相 反 ， 如 果 不 使 用 var 关键 字 声 明 变量 ， 会 发 现 域外 和 域内 变量 b 显示 相同 的 
值 ， 因 为 “b = "b( 域 内 ) = 域内 变量 <br />";” 将 覆盖 掉 “var b= "b( 域 外 ) = 全 局 变量 <br />";” 的 值 ， 
在 浏览 器 中 预览 ， 显 示 效 果 如 图 17.3 所 示 。 


vara= "a( 域 外 ) = 全 局 变量 <br />"; // 声 明 全 局 变量 a 
varb = "b( 域 外 ) = 全 局 变量 <br />": /声明 全 局 变量 b 
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& A 从 入 门 到 精通 ( 微 梨 精 编 版 ) 


| CS 
| function f0 { 
| vara="a( 域 内 ) = 域内 变量 <br />"; // 声 明 局 部 变量 a 
| b= "b( 域 内 ) = 域内 变量 <br />"; // 重 写 全 局 变量 a 的 值 
ok document.write(a): /| 输出 变量 a 的 值 
仿 F | document.write(b): // 输 出 变量 b 的 值 
A | } 
| 
{0: // 调 用 函数 
document write(a): // 输 出 变量 a 的 值 
| document.write(b): // 输 出 变量 b 的 值 


1S loraltost 
a( 域 内 ) = 域内 变量 
以 域内 ) = 域内 变量 
a 域外) = 全 局 变量 


域内 )= 域内 变量 








图 17.3 变量 作用 域 
【拓展 】 
E 中 本 节 简 单 介绍 了 JavaScript 变 量 的 基本 使 用 ,如 果 读者 想 深入 学 习 JavaScript 
线 上 阅读 变量 使 用 ， 可 以 扫 码 在 线 阅 读 。 


17.3.2 ”数据 类 型 
JavaScript 定义 了 6 种 基本 数据 类 型 ， 如 表 17.1 所 示 。 
表 17.1 JavaScript 的 6 种 基本 数据 类 型 














数据 类 型 说 了 明 
null 空 值 。 表 示 不 存在 ， 当 为 对 象 的 属性 赋值 为 null， 表 示 删 除 该 属性 
undefined 未 定义 。 当 声明 变量 ， 而 没有 赋值 时 会 显示 该 值 。 可 以 为 变量 赋值 为 undefined 
number 数值 。 最 原始 的 数据 类 型 ， 表 达 式 计算 的 载体 
| string 字符 串 。 最 抽象 的 数据 类 型 ， 信 息 传播 的 载体 
| boolean | 布尔 值 。 最 机 械 的 数据 类 型 ， 逻 辑 运算 的 载体 
| object 对 象 。 面 向 对 象 的 基础 
| 【示例 】 使 用 typeof 运算 符 可 以 检测 数据 的 基本 类 型 。 下 面 代码 使 用 typeof 运算 符 分 别 检测 常用 
| 直接 量 的 值 的 类 型 。 
alert(ypeof 1): /返回 字符 囊 "humber”" 
| alert(typeof "1"): // 返 回 字符 串 "string" 
alert(typeof true): // 返 回 字符 串 "boolean" 
alert(typeof {}); // 返 回 字符 串 "object" 
| alert(typeof []): // 返 回 字符 串 "object " 
| alerttypeoffunction0{)): // 返 回 字符 串 "function" 
| alerttypeofnulD: // 返 回 字符 串 "object” 
| alert(typeof undefined): // 返 回 字符 串 "undefined" 
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【拓展 】 | 


本 节 简 单 介 绍 了 JavaScript 数据 类 型 ， 实 际 上 JavaScript 数据 类 型 的 使 用 还 是 
比较 复杂 的 , 如 果 读者 想 进一步 深入 学 习 JavaScript 数据 类 型 , 可 以 扫 码 在 线 阅 读 。 


17.4 使 用 运算 符 和 表达 式 





表达 式 是 可 以 运算 且 必须 返回 一 个 确定 的 值 的 式 子 。 表 达 式 一 般 由 常量 、 变 量 、 运 算 符 、 子 表达 
式 构成 。 
最 简单 的 表达 式 可 以 是 一 个 简单 的 值 、 常 量 或 变量 。 例 如 : 


1 /后 字 表达 式 | 
va" // 字 符 串 表达 式 | 
tme // 布 尔 值 表达 式 | 
a /变量 表达 式 


值 表达 式 的 返回 值 为 它 本 身 ， 而 变量 表达 式 的 返回 值 为 变量 存储 或 引用 的 值 。 

把 这 些 简单 的 表达 式 合并 为 一 个 复杂 的 表达 式 , 那么 连接 这 些 表达 式 的 符号 就 是 运算 符 。 运 算 符 
就 是 根据 特定 算法 定义 的 执行 运算 的 命令 。 

【示例 1】 在 下 面 示 例 代码 中 ， 变 量 a、b、c 就 是 最 简单 的 变量 表达 式 ，1 和 2 是 最 简单 的 值 表 
达 式 ， 而 “=” 和 “+” 是 连接 这 些 简单 表达 式 的 运算 符 。 最 后 形成 3 个 稍 复杂 的 表达 式 :“a=1”“b 


=2” “c=at+b”。 


vara=1,.b=2; 
Varc=a+b: 
运算 符 一 般 使 用 符号 来 表示 ， 如 +、-、/、=、| 等 ， 也 有 些 运 算 符 使 用 关键 字 来 表示 ， 如 delete、 
void 等 。 
此 时 作用 于 运算 符 的 子 表达 式 被 称 为 操作 数 。 根 据 结合 操作 数 的 个 数 ，JavaScript 运算 符 可 以 分 
为 3 种 类 型 
一 元 运算 符 : 一 个 运算 符 能 够 结合 一 个 操作 数 ， 把 一 个 操作 数 运算 后 转换 为 另 一 个 操作 数 ， 
如 ++、-- 等 。 | 
二 元 运算 符 : 一 个 运算 符 能 够 结合 两 个 操作 数 ， 形 成 一 个 复杂 的 表达 式 。 大 部 分 运算 符 都 属 | 
于 二 元 运算 符 。 | 
三 元 运算 符 : 一 个 运算 符 能 够 结合 三 个 操作 数 ， 把 三 个 操作 数 合 并 为 一 个 表达 式 ， 最 后 返回 | 
一 个 值 。JavaScript 仅 定义 了 一 个 三 元 运算 符 〈?:) ， 它 相当 于 条 件 语句 。 


回 





你 提示 : 使 用 运算 符 应 注意 两 个 问题 : 
了 解 并 掌握 每 一 种 运算 符 的 用 途 和 用 法 ， 特 别 是 一 些 特殊 的 运算 符 ， 需 要 识 记 和 不 断 
积累 应 用 技巧 。 
回 熟悉 每 个 运算 符 的 运算 顺序 、 运 算 方向 和 运算 类 型 。 


JavaScript 运算 符 说 明 如 表 17.2 所 示 。 该 表 各 列 参 数 说 明 如 下 : 
分 类 : 根据 运算 符 的 使 用 类 型 进行 分 类 ， 以 方便 快速 查找 。 
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起 ， wa ( 微 课 精 编 版 ) 
| 回 ”类 型 ; 使 用 运算 符 定义 表达 式 时 ， 要 注意 传递 给 运算 符 的 数据 类 型 和 返回 的 数据 类 型 。 各 种 
运算 符 用 来 计算 的 操作 数 ( 子 表达 式 ) 应 符合 指定 的 数据 类 型 。 部 分 运算 符 能 够 在 计算 之 前 
| 自动 对 操作 数 执行 强制 数据 类 型 转换 ， 这 种 转换 主要 针对 字符 串 和 数值 之 间 运 算 。 
| 运算 顺序 ， 当 不 同 运算 符 混合 在 一 起 时 ， 将 根据 运算 符 优先 级 来 确定 运算 顺序 。 在 表 17.2 中 
| 优先 运输 顺序 数字 越 大 ， 该 行 对 应 的 运算 符 的 优先 级 就 越 大 。 当 优先 级 相同 时 ， 则 遵循 运算 
符 的 运算 方向 来 进行 计算 。 
| 回 运算 方向 :说明 当 优先 级 相等 时 ， 运 算 符 执行 操作 的 顺序 。 其 中 “ 左 ” 选 项 表示 运算 顺序 从 
左 到 右 ， 而 “ 右 ”选项 表示 运算 顺序 从 右 到 左 。 


3 
sl 


表 17.2 ” JavaScript 运算 符 列表 


| 操作 数 运算 | 运算 
| 十 数值 12 左 _| (加 法 ) 将 两 个 数 相 加 





二 数值 ( 自 增 ) 将 表示 数值 的 变量 加 1 (可 以 返回 新 值 或 旧 值 ) 
= 数值 (减法 ) 将 两 个 数 相 减 
| 六 运 上 | 数值 | 14 | 右 | ( 自 减 ) 将 表示 数值 的 变量 减 1 (可 以 返回 新 值 或 旧 值 ) 
| 2 数字 | 14 | 右 | 一 元 求 负 运 算 


本 数字 一 元 求 正 运算 

| * 数值 (乘法 ) 将 两 个 数 相 乘 

| / 数值 (除法 ) 将 两 个 数 相 除 

| % 数值 ( 求 余 ) 求 两 个 数 相 除 的 余数 
| 

















字符 囊 [+ 字符 串 | 1 | -| 字符 串 加 法 ) 连接 两 个 字符 串 
运算 符 | 二 字符 串 | ”2 | 右 | 连接 两 个 字符 串 ， 并 将 结果 赋 给 第 一 个 字符 串 

(逻辑 与 ) 如 果 两 个 操作 数 都 是 真 ， 则 返回 真 ，, 否 则 返 

| && 布尔 值 回 候 

| i (逻辑 或 ) 如 果 两 个 操作 数 都 是 假 ， 则 返回 假 ， 和 否则 返 

| “运算 符 回 真 

| 二 (逻辑 非 如 果 其 单一 操作 数 为 真 ， 则 返回 假 ， 否 则 返 

| 布尔 值 回 丰 

& 整数 ( 按 位 与 ) 如 果 两 个 操作 数 对 应 位 都 是 1, 则 在 该 位 返回 1 

. i ( 按 位 异 或 ) 如 果 两 个 操作 数 对 应 位 只 有 一 个 1， 则 在 

| 该 位 返回 1 

| 整数 ( 接 位 或 ) 如 果 两 个 操作 数 对 应 位 都 是 0， 则 在 该 位 返回 0 

| 整数 ( 求 反 ) 按 位 求 反 

es ee ( 左 移 ) 将 第 一 个 操作 数 的 二 进 制 形式 的 每 一 位 向 左 移 

| 位 ,所 移 位 的 数目 由 第 二 个 操作 数 指定 。 右面 的 空位 补 0 

| (算术 右 移 ) 将 第 一 个 操作 数 的 二 进 制 形式 的 每 一 位 向 

| 整数 右 移 位 ,所 移 位 的 数目 由 第 二 个 操作 数 指定 。 忽略 被 移 

出 的 位 

| (逻辑 右 移 ) 将 第 一 个 操作 数 的 二 进 制 形式 的 每 一 位 向 

| >>> | 整数 右 移 位 , 所 移 位 的 数目 由 第 二 个 操作 数 指定 。 忽略 被 移 

| 











出 的 位 ， 左 面 的 空位 补 0 
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分 类 | 运算 符 说 明 





= 标识 符 ， 任 意 2 右 “| 将 第 二 操作 数 的 值 赋 给 第 一 操作 数 








将 两 个 数 相 加 ， 并 将 和 赋 给 第 一 个 数 








将 两 个 数 相 减 ， 并 将 差 赋 给 第 一 个 数 
将 两 个 数 相 乘 ， 并 将 积 赋 给 第 一 个 数 








将 两 个 数 相 除 ， 并 将 商 赋 给 第 一 个 数 








计算 两 个 数 相 除 的 余数 ， 并 将 余数 赋 给 第 一 个 数 





运算 符 | &= 标识 符 ， 任 意 执行 按 位 与 ， 并 将 结果 赋 给 第 一 个 操作 数 





执行 按 位 异 或 ， 并 将 结果 赋 给 第 一 个 操作 数 








计 | 计 | 对 | 对 | 证 | 对 | 填 | 寺 | 让 





执行 按 位 或 ， 并 将 结果 赋 给 第 一 个 操作 数 









要 
2 
2 
2 
赋值 ”| %= 标识 符 ， 任 意 2 
2 
2 
2 
2 


执行 左 移 ， 并 将 结果 赋 给 第 一 个 操作 数 
任意 全 执行 算术 右 移 ， 并 将 结果 赋 给 第 一 个 操作 数 
任意 | 2 | 右 | 执行 逻辑 右 黎 ， 并 将 结果 赋 给 第 一 个 操作 数 
| 9 | 左 | 如果 操作 数 相等 ， 则 返回 真 
| 9 | 如 果 操 作 数 完全 相同 ， 则 返回 真 
| 9。 | 左 | 如 果 操 作 数 不 相 等 ， 则 返回 真 
| 9 如 果 操作 数 不 完 全 相同 ， 则 返回 真 
数值 或 字符 中 |。 10 | 左 | 如 果 左 操作 数 大 于 右 操作 数 ， 则 返回 丰 
数值 或 字符 串 | 10 | 左 | 如 果 左 操作 数 大 于 等 于 右 操作 数 ， 则 ji 
数值 或 字符 电 | 10 | 如 果 左 操作 数 小 于 右 操作 数 ， 则 返回 真 
数值 或 字符 串 | 10 | 左 | 如 果 左 操作 数 小 于 等 于 右 操作 数 ， 则 返回 真 
人 有 “| 执行 一 个 简单 的 “if.else” 语 句 
任意 | ”1 | 左 | 计算 两 个 表达 式 ,返回 第 二 个 表达 式 的 什 
属性 标识 ”| ”14 | 右 | 允许 删除 一 个 对 象 的 属性 或 数组 中 指定 的 元 素 
允许 创建 一 个 用 户 自 定义 对 象 类 型 或 内 建 对 象 类 型 的 
new 类 型 ， 参 数 












比较 != 
运算 符 | > 
























实例 
特殊 | typeof _| 任意 





返回 一 个 字符 串 ， 表 明 未 计算 的 操作 数 的 数据 类 型 
运算 符 | instance 

















对 象 ， 类 型 检查 对 象 的 类 型 
in 字符 串 ， 对 象 检查 一 个 属性 是 否 存在 
void 任意 该 运算 符 指定 了 要 计算 一 个 表达 式 但 不 返回 值 
.点 ) | 对象， 标识 符 属性 存 取 
数组 ， 整 数 数组 下 标 








0 函数 ， 参 数 | 函数 调用 


运算 符 比 较 多 ， 用 法 灵活 ， 完 全 掌握 需要 读者 认真 学 习 并 不 断 实 践 、 积 累 经 验 ， 下 面 通过 几 个 实 
例 讲解 特殊 运算 符 的 用 法 。 

条 件 运 算 符 

条 件 运算 符 〈?:) 是 JavaScript 唯一 的 一 个 三 元 运算 符 。 其 语法 格式 如 下 : 








“379。 









A 





condition ? exprl : expr2 
condition 是 一 个 逻辑 表达 式 ， 当 其 为 tue 时 ， 则 执行 exprl 表达 式 ， 否 则 执行 expr2 表达 式 。 条 


人 
这 condition) 
exXpI1: 
i a 
expr2; 


| 【示例 2】 借 助 三 元 运算 符 初始 化 变量 值 为 no value， 而 不 是 默认 的 undefined。 在 下 面 代码 中 ， 
| 设计 当 变 量 未 声明 或 未 初始 化 ， 则 为 其 赋值 为 "no value"， 如 果 被 初始 化 ， 则 使 用 被 赋 的 值 。 


name = name ? name : "no value"; // 通 过 三 元 运算 符 初始 化 变量 的 值 
逗号 运算 符 


逗号 运算 符 〈,) 能 够 依次 计算 两 个 操作 数 并 返回 第 2 个 操作 数 的 值 。 
【示例 3】 在 下 面 示例 中 ， 先 定义 一 个 数组 a]， 然 后 在 一 个 for 循环 体内 利用 逗号 运算 符 同 时 计 
| 算 两 个 变量 值 的 变化 。 这 时 可 以 看 到 输出 数组 都 是 位 于 二 维 数组 的 对 角 线 上 ， 如 图 17.4 所 示 。 
var a=[]; // 声 明 并 初始 化 变量 a 的 值 
for(vari=0,j=10;i<=10;i++,j--){ ”// 在 循环 体 中 使 用 去 号 运算 符 实现 额外 计算 任务 

ali,j] =i+j: 

document.writeln("a[" +i+","+j+"]="+alfi,j]); 
} 


Ee 全 "nickoom D » Bo | locahoct 


a[0.10]- 10 a[1.9]- 10 a[2,8]- 10 a[3.7]- 10 a[4,6]- 10 
a[5,5]= 10 a[6,4]= 10 a[7,3]= 10 a[8,2]= 10 a[9,1]= 10 a 


110.0j= 10 





17.4 逗号 运算 符 的 计算 效果 


回 void 运算 符 

void 运算 符 指定 要 计算 一 个 表达 式 ， 但 是 不 返回 值 。 其 语法 格式 如 下 : 

javascript:void (expression) 

javascript:void expression 

expression 是 一 个 JavaScript 标准 表达 式 ， 表 达 式 外 侧 的 圆 括号 是 可 选 的 。 例 如 : 

<a href-"javascriptvoid(document formms[0].submitO)"> 提 交 表 单 </a> 

上 面 这 个 代码 创建 了 一 个 超 链接 ， 当 用 户 单 击 时 不 会 发 生 任何 事 。 当 用 户 单 击 链接 时 ，void(O0) 
| [i 0， 但 在 JavaScript 上 没有 任何 效果 。 

| 【拓展 】 

| 本 节 简 单 介 绍 了 JavaScript 运算 符 , 但 是 限于 篇 幅 ， 我 们 没有 对 每 个 JavaScript 运算 符 展开 讲解 ， 
| 上 步 深入 学 习 JavaScript 运算 符 ， 可 以 扫 码 在 线 阅读 。 
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算术 运算 符 。 
逻辑 运算 符 。 
赋值 运算 符 。 
对 象 操作 运算 符 。 线 上 阅读 


其 他 运算 符 。 
17.5 使 用 语句 





回回 回回 图 加 





语句 就 是 JavaScript 指令 ， 通 过 这 些 指令 可 以 设计 程序 的 逻辑 执行 顺序 。 
17.5.1 ”表达 式 语句 和 语句 块 


如 果 在 表达 式 的 尾部 附加 一 个 分 号 就 会 形成 一 个 表达 式 语句 。JavaScript 默认 独立 一 行 的 表达 式 | 
也 是 表达 式 语句 ， 解 析 时 自动 补 加 分 号 。 表 达 式 语句 是 最 简单 、 最 基本 的 语句 。 这 种 语句 一 般 按 着 从 | 
上 到 下 的 顺序 依次 执行 。 | 
【示例 】 语 句 块 就 是 由 大 括号 包含 的 一 个 或 多 个 语句 。 在 下 面 代码 段 中 ， 第 一 行 是 一 个 表达 式 语 | 
句 ， 第 二 行 到 第 五 行 是 一 个 语句 块 ， 该 语句 块 中 包含 两 个 简单 的 表达 式 语句 。 





视频 讲 


Var a.b.c; // 表 达 式 语句 
{ // 语 句 块 | 
a=b=c=1 | 
a=b+c; | 
} 
【拓展 】 


下 面 为 大 家 介绍 一 下 语句 的 分 类 和 类 型 ， 感 兴趣 的 读者 可 以 扫 码 在 线 阅读 。 





线 上 阅读 


17.5.2 ”条件 语句 

程序 的 基本 逻辑 结构 包括 3 种 : 顺序 、 选 择 和 循环 。 大 部 分 控制 语句 都 属于 顺序 结构 ， 而 条 件 语 
句 属于 选择 结构 ， 它 主要 包括 站 语句 和 switch 语句 两 种 。 

1. 让 语句 

让 语句 的 基本 语法 如 下 : 


| 
if (condition) | 
statements | 





其 中 condition 是 一 个 表达 式 , statements 是 一 个 句子 或 段落 。 当 condition 表达 式 的 结果 不 是 false | 
且 不 能 转换 为 false 时 ， 就 执行 statements 从 句 的 内 容 ， 否 则 就 不 执行 。 | 

【示例 1】 下 面条 件 语句 的 从 句 是 一 个 句子 。 该 条 件 语句 先 判断 指定 变量 是 否 被 初始 化 ， 如 果 没 
有 则 新 建 对 象 。 
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A 





| 
| 这 typeofo) — "undefined") // 如 果 变量 o 未 定义 ， 则 重新 定义 
| 0=new ObjectO: 
| 
大 | 【示例 2】 下 面条 件 语句 的 从 句 是 一 个 段落 。 该 条 件 语句 先 判断 变量 a 是 否 大 于 变量 b， 如 果 大 
”于 则 交换 值 。 
Note | ifa>b){ // 如 果 a 大 于 b， 则 执行 下 面 语句 块 
a=a-b; 
b=a+b; 
a=b-a; 
} 


在 站 语句 的 基本 形式 上 还 可 以 扩展 如 下 语法 形式 。 它 表示 如 果 condition 表达 式 条 件 为 tue， 则 
执行 statementsl 从 句 ， 否 则 执行 statements2 从 句 。 


【示例 3】 在 上 面 示例 基础 上 可 以 按 如 下 方式 扩展 它 的 表现 行为 。 如 果 a 大 于 b， 则 蔡 换 它们 的 
| 值 ， 否 则 输出 提示 信息 ， 如 图 17.5 所 示 。 


SE 
b 大 于 a， 无 法 交换 





17.5 条件 语句 的 应 用 





vara=2.b=4: 

| ifla>b) { // 如 果 a 大 于 b， 则 执行 下 面 语句 块 

| a=a-b; 

| b=a+b; 

| a=b-a; 

} 

else // 如 果 a 不 大 于 b， 则 输出 提示 信息 
document write("b 大 于 a， 无 法 交换 "): 





2. switch 语句 
对 于 多 条 件 的 嵌 套 结构 ， 更 简洁 的 方法 是 使 用 switch 语句 。 其 语法 格式 如 下 : 
Switch (expression){ 

case labell : 


“382% 


第 17 章 .JavaScript 基础 eS | 


statementl: 





CE vote 


switch 语句 首先 计算 switch 关键 字 后 面 的 表达 式 ， 然 后 按 着 出 现 的 先后 顺序 计算 case 后 面 的 表 
达 式 ， 直 到 找到 与 switch 表达 式 的 值 等 同 (一 =) 的 值 为 止 。case 表达 式 通过 等 同 运算 来 进行 判断 ， 
因此 表达 式 匹配 的 时 候 不 进行 类 型 转换 。 | 

如 果 没 有 一 个 case 标签 与 switch 后 面 的 表达 式 匹 配 ， 则 switch 语句 开始 执行 标签 为 default 的 语 | | 
句 体 。 如 果 没 有 default 标签 ，switch 语句 就 跳出 整个 结构 体 。 在 默认 情况 下 ，default 标签 通常 放 在 | 
末尾 ， 当 然 也 可 以 放 在 switch 主体 的 任意 位 置 。 

【示例 4】 下 面 示例 使 用 prompt0 方 法 获取 用 户 输入 的 值 ， 然 后 根据 输入 的 值 判 断 你 是 几 年 级 ， 
演示 效果 如 图 17.6 所 示 。 








图 17.6 switch 语句 的 应 用 


var age = prompt(' 您 好 ， 请 输入 你 的 年 级 "") ; 
Switch(age){ | 
case "1": | 
alert(" 你 上 一 年 级 ! "): | 
break 
Case "2": 
alert(" 你 上 二 年 级 ! "); 
break: | 
Ce 3" | 
alert(" 你 上 三 年 级 !"); | 
break: 
default: 
alert(" 不 知道 你 上 几 年 级 "): 
} 


17.5.3 ”循环 语句 


循环 语句 就 是 能 够 重复 执行 相同 操作 的 语句 。 作 为 JavaScript 的 基本 结构 ， 在 应 用 开发 中 也 是 经 
常 使 用 。 与 站 语句 一 样 ， 循 环 语句 也 有 两 种 基本 语法 形式 : while 语句 和 for 语句 。 





视频 讲解 


| 
| 
| 
ks 
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1. while 语句 
while 语句 的 基本 语法 形式 如 下 : 
A | while (condition) { 
| } 


while 语句 在 每 次 循环 开始 之 前 都 要 计算 condition 表达 式 。 如 果 为 true,， 则 执行 循环 体内 的 语句 ; 
| 如 果 为 false， 就 跳出 循环 体 ， 转 而 执行 while 语句 后 面 的 语句 。 
| 【示例 1】 在 下 面 这 个 循环 语句 中 ， 在 变量 a 大 于 等 于 10 之 前 ，while 语句 将 循环 10 次 输出 显 
| 示 变 量 a 的 值 ， 在 结构 体内 不 断 递增 变量 a 的 值 。 
var a=0; 
while (a< 10){ 
document.write(a); 
at+; 


} 

while 语句 还 有 一 种 特殊 的 变 体 ， 其 语法 形式 如 下 : 

do 

statement 

While (condition); 
| 在 这 种 语句 体 中 ， 首 先 执行 statement 语句 块 一 次 ， 在 每 次 循环 完成 之 后 计算 condition 条 件 ， 并 
| 且 会 在 每 次 条 件 计算 为 true 的 时 候 重新 执行 statement 语句 块 。 如 果 condition 条 件 计算 为 false， 将 会 
| 跳 转 到 do/while 后 面 的 语句 。 
| 【示例 2】 针 对 示例 1， 可 以 改写 为 下 面 形式 。 


on 
2. for 语句 
for 语句 要 比 while 语句 简洁 ， 因 此 更 受用 户 喜欢 。 其 语法 形式 如 下 : 


for ([initial-expression:] [condition:] [increment-expression]) { 
statements 


} 


for 语句 首先 计算 初始 化 表达 式 (initial-expression)， 典 型 情况 下 用 于 初始 化 计数 器 变量 ， 该 表达 
| 式 可 选用 var 关键 字 声明 新 变量 。 然 后 在 每 次 执行 循环 的 时 候 计算 该 表达 式 ， 如 果 为 tue， 就 执行 
| statements 中 的 语句 ， 该 条 件 测试 是 可 选 的 ， 如 果 缺 省 则 条 件 永远 为 tue。 此 时 除非 在 循环 体内 使 用 
| break 语句 ， 否 则 不 能 终止 循环 。increment-expression 表达 式 通 常用 于 更 新 或 自 增 计数 器 变量 。 
【示例 3】 把 上 面 的 示例 用 for 语句 来 设计 ， 则 代码 如 下 : 

forvari=0:1<10:i++){ 

| document writeGD: 
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在 for 循环 语句 中 也 可 以 引入 多 个 计数 器 ， 并 在 每 次 循环 中 同时 改变 它们 的 值 。 例 如 : | 
for(vara=1.b=1,.c=1:a+b+c<100:a++.,.b+i=2.,c*=2){ | 
document.write( "a=" +a+".b="+b+".c="+c+"<br/>"): | 
} | 

在 上 面 的 示例 中 引入 了 3 个 计数 器 ,并 分 别 在 每 一 次 循环 中 改变 它们 的 值 , 循环 的 条 件 根 据 3 个 | 
计数 器 的 总 和 小 于 100， 执 行 效果 如 图 17.7 所 示 。 





p 
© Er Er 


a=1,b=1,c=1 
sb3, ,c=2 


a=7,l b=13, c=64 





图 17.7 多 计数 器 的 循环 语句 运行 效果 
17.5.4” 跳 转 语句 


跳 转 语句 能 够 从 所 在 的 分 支 、 循 环 或 从 函数 调用 返回 的 语句 跳出 。JavaScript 的 跳 转 语句 包括 3 
种 :break 语句 、continue 语句 和 return 语句 。 

break 语句 用 来 退出 循环 或 者 switch 语句 。 其 语法 格式 如 下 : 

break': 


【示例 1】 在 下 面 这 个 示例 中 设置 while 语句 的 循环 表达 式 永远 为 tue (while 能 够 转换 数值 1 为 | 
true)。 然 后 在 while 循环 结构 体 设置 一 个 过 语 句 ， 判 断 当 变量 i 大 于 50 时 ， 则 跳出 while 循环 体 。 
vari= 0; 
while(D{ 
这 i > 50) break: 
i++; 
document.write(D): 





} 
【示例 2】 跳 转 语句 也 可 以 与 标记 结合 使 用 ， 以 实现 跳 转 到 指定 的 行 ， 而 不 是 仅仅 跳出 循环 体 。 | 
在 下 面 嵌 套 for 循环 体内 , 在 外 层 for 语句 中 定义 一 个 标记 x, 然后 在 内 层 for 语句 中 使 用 站 语 句 设置 | 
当 a 大 于 5 时 跳出 外 层 for 语句 ， 运 行 效果 如 图 17.8 所 示 。 | 


| 

x:for(a=1:a<10:a++){ // 添 加 标签 | 

document.write("<br />" + a + "<br />"); | 

for(var b=1:b<10:b++){ | 

if(a > 5) break x: 1/ 如果 a 大 于 5， 则 跳出 标签 | 

document write(b): | 

ly | 

} | 
~、、 
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上] 
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含 和 | 1234s6789 


| jms 


站 
Jote | 人 
! 


123456789 
6 





图 17.8 ” 跳 转 语句 与 标记 配合 使 用 
continue 语句 的 用 法 与 break 语句 相似 ， 唯 一 的 区 别 是 continue 语句 不 会 退出 循环 ， 而 是 开始 新 


return [expression] 
当 执 行 retum 语句 时 ， 先 计算 expression 表达 式 ， 然 后 返回 表达 式 的 值 ， 
并 将 控制 逻辑 从 函数 体内 返回 。 
【拓展 】 
我 们 再 介绍 一 下 异常 处 理 语句 ， 感 兴趣 的 读者 可 以 扫 码 在 线 阅读 。 





17.6 使 用 函数 


17.6.1 定义 函数 


定义 函数 的 方法 有 两 种 : 

使 用 function 语句 声明 函数 。 

回 ”通过 Function 对 象 来 构造 函数 。 
使 用 function 语句 定义 函数 有 两 种 方式 : 
/方式 1: 命名 函数 

| function fO{ 

| /函数 体 
I 





} 

// 方 式 2: 匿名 函数 

var f= functionO{ 
/函数 体 


命名 函数 的 方法 也 被 称 为 声明 式 函 数 ， 而 匿名 函数 的 方法 也 被 称 为 引用 式 函 数 或 者 函数 表达 式 ， 
」 即 把 函数 看 作 一 个 复杂 的 表达 式 ， 并 把 表达 式 赋 给 变量 。 
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使 用 Function 对 象 构造 函数 的 语法 如 下 : 
var function name = new Function(arg1. arg2. ..., areN. function body) 
在 上 面 语法 形式 中 ， 每 个 arg 都 是 一 个 函数 参数 ， 最 后 一 个 参数 是 函数 主体 (要 执行 的 代码 )。 1 
Function0 的 所 有 参数 必须 是 字符 串 。 | 
【示例 1】 在 下 面 示例 中 ， 通 过 Function 构造 函数 定义 了 一 个 自 定义 函数 ， 该 函数 包含 两 个 参数 ， | 
在 函数 主体 部 分 使 用 doecument write(0) 方 法 把 两 个 参数 包 计 在 <h1> 标 签 中 输出 , 显示 效果 如 图 17.9 所 示 。 


Var say = new Function("name" "say" "document.write(‘<hl>'+ name+' : '+say+'</h1>"):"): | 
say(" 张 三 ", "Hi!"); // 调 用 函数 











图 17.9 构造 函数 并 执行 调用 


【示例 2】 在 实际 开发 中 , 使 用 function 定义 函数 要 比 Function 构造 函数 方便 ， 且 执行 效果 更 高 。 
Function 仅 用 于 特定 的 动态 环境 中 ， 一 般 不 建议 使 用 。 针 对 上 面 示例 ， 可 以 把 它 转换 为 fhnction 定义 | 
函数 的 方式 ， 则 代码 如 下 : 

var say = function(name, say){ // 定 义 函 数 
document.write(<hl>' + name+' : '+say+'</h1>"): 


} 
say(" 张 三 ", "Hi!"); /调用 函数 


17.6.2 ”调用 函数 
调用 函数 使 用 小 括号 运算 符 来 实现 。 在 括号 运算 符 内 部 可 以 包含 多 个 参数 列表 ,参数 之 间 通 过 去 
号 进行 分 隔 。 | 
【示例 】 在 下 面 示例 中 使 用 小 括号 调用 函数 f， 并 把 返回 值 传递 给 document.write 0 方法 。 | 





| 视频 讲解 


function fO{ 
Teturn "Hello, World! ": // 设 置 函 数 返 回 值 
} 
document.write(f0)): // 调 用 函数 ， 并 输出 返回 值 


| 
| 
从 提示 : 一 个 函数 可 以 包含 多 个 retum 语句 ,但 是 在 调用 函数 时 只 有 第 一 个 retum 语句 被 执行 ， 且 
该 fetum 语 身后 面 的 表达 式 的 值 作为 函数 的 返回 人 被 返回 ，retum 语句 后 面 的 代码 将 被 名 
略 掉 。 | 
函数 的 返回 值 没有 类 型 限制 ， 它 可 以 返回 任意 类 型 的 值 。 


17.6.3 ”函数 参数 


参数 可 以 分 为 两 种 : 形 参 和 实 参 。 
回 “ 形 参 就 是 在 定义 函数 时 ， 传 递 给 函数 的 参数 ， 被 称 为 形 参 ， 即 形式 上 参数 。 
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a A 
| 回 “ 实 参 就 是 当 函 数 被 调用 时 ， 传 递 给 函数 的 参数 ， 这 些 参数 被 称 为 实 参 。 

| 【示例 1] 在 下 而 示例 函数 中 ， 参 数 a 和 就 是 形 参 ， 而 调用 函数 中 的 23 和 34 就是 实 参 。 
| function add(a,b) { // 形 参 a 和 b 


天 和 站 } 
”Note | alert(add(23,34)): // 实 参 23 和 34 


| 函数 的 形 参 没 有 限制 ， 可 以 包括 零 个 或 多 个 。 函 数 形 参 的 数量 可 以 通过 函数 的 length 属性 获取 。 
| 【示例 2】 针对 上 面 函 数 可 以 使 用 下 面 语句 读 取 函数 的 形 参 个 数 。 
| function add(a.b) { 
| Teturn at+b: 
| 国 
‘alert(add length): // 返 回 2， 形 参 的 个 数 
| 一 般 情况 下 ， 函 数 的 形 参 和 实 参 个 数 是 相等 的 ， 但 是 JavaScript 没有 规定 两 者 必须 相等 。 如 果 形 
参数 大 于 实 参数 ， 则 多 出 的 形 参 值 为 undefined， 相 反 ， 如 果实 参数 大 于 形 参数 ， 则 多 出 的 实 参 就 无 
法 被 形 参 变量 访问 ， 从 而 被 忽略 掉 。 

【示例 3】 在 下 面 示例 中 ， 如 果 在 调用 函数 时 传递 3 个 实 参 值 ， 则 函数 将 忽略 第 三 个 实 参 的 值 ， 
最 后 提示 的 结果 为 5。 


function add(ab) { 
Teturn at+b: 


} 
alert(add(2,3,4)): /传递 3 个 实 参 ， 第 三 个 参数 将 被 忽略 ， 提 示 值 为 5 


【示例 4】 在 下 面 示例 中 ， 在 调用 函数 时 仅 输入 1 个 实 参 。 这 时 ， 函 数 就 把 第 二 个 形 参 的 值 默认 
为 undefined， 然 后 使 用 undefined 与 2 相 加 。 由 于 任何 值 与 undefined 进行 运算 的 结果 都 将 返回 NaN 
(无 效 的 数值 )， 则 显示 效果 如 图 17.10 所 示 。 

















图 17.10 形 参 与 实 参 不 一 致 时 的 运行 结果 


| 

| 

| 

| 

function add(a.b) { 
| return a+b: 
| 

| 


} 
alert(add(2)): // 返 回 undefined 与 2 相 加 的 值 ， 即 为 NaN 


| JavaScript 定义 了 Arguments 对 象 ， 利 用 该 对 象 可 以 快速 操纵 函数 的 实 参 。 使 用 arguments.length 
| 可 以 获取 函数 实 参 的 个 数 ， 使 用 数组 下 标 arguments[n]) 可 以 获取 实际 传递 给 函数 的 每 个 参数 值 。 

| 【示例 $】 为 了 预防 用 户 随意 传递 参数 ， 可 以 在 函数 体检 测 函 数 的 形 参 和 实 参 是 否 一 致 ， 如 果 不 
| 一致 可 以 抛 出 异常 ， 如 果 一 致 则 执行 正常 的 运算 。 
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function add(a. b) { | 
这 addlength != arguments.length) /检测 形 参 和 实 参 是 否 一 致 | 
throw new Ermror(" 实 参与 形 参 不 一 致 ， 请 重新 调用 函数 ! "): | 
a | 
Tetun a+b; 加 会 向 
9 | 师 
ty{ /尝试 调用 函数 
| 
catch(e){ // 捕 获 异常 信息 | 
alert(e.message); | 


在 add0 函 数 中 增加 了 一 个 条 件 检测 ， 来 判断 函数 的 形 参 和 实 参 的 数量 是 否 相 同 。 如 果 不 相同 ， 
则 抛 出 一 个 错误 信息 对 象 :如 果 相 同 , 则 返回 参数 的 和 .然后 调用 函数 ,并 利用 异常 处 理 语句 (try/eateh) | | 
来 捕获 错误 信息 ， 并 在 提示 对 话 框 中 显示 出 来 ， 如 图 17.11 所 示 。 





17.11 形 参 和 实 参 不 一 致 的 异常 处 理 


17.7 使 用 对 和 象 


对 象 (Object) 是 面向 对 象 编程 的 核心 概念 ， 它 是 已 经 命名 的 数据 集合 ， 也 是 - -种 更 复杂 的 数据 | 
结构 。 


17.7.1 创建 对 象 


在 JavaScript 中 ， 对 象 是 由 new 运算 符 生成 的 ， 生 成 对 象 的 函数 被 称 为 类 (或 称 构造 函数 、 对 象 Ee 
类 型 )。 生 成 的 对 象 被 称 为 类 的 实例 ， 简 称 为 对 象 。 
【示例 1】 在 下 面 示例 中 ， 分 别 调动 系统 内 置 类 型 函数 ， 实 例 化 几 个 特殊 对 象 。 





var 0 = new Object0: // 构 造 原型 对 象 | 

Var date = new Date(): // 构 造 日 期 对 象 | 

var ptn = new RegExp("abte"."i"): // 构 造 正则 表达 式 对 象 | 

| 

也 可 以 通过 大 括号 定义 对 象 直接 量 。 其 基本 用 法 如 下 : | 

{ | 
name : value. 

namel : valuel. | 

ee | 

} \ 
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对 象 的 属性 值 可 以 是 简单 的 值 ， 也 可 以 是 复杂 的 值 ， 如 函数 、 对 象 。 
当 属性 值 为 函数 时 ， 该 属性 就 被 称 为 对 象 的 方法 ， 使 用 小 括号 可 以 访问 该 方法 。 
【示例 2】 在 下 面 示例 中 ， 使 用 点 号 运算 符 访问 对 象 point 的 下 属性 ， 然 后 使 用 小 括号 调用 对 象 


| 
| 对 象 直接 量 由 一 个 列表 构成 ， 这 个 列表 的 元 素 是 用 冒号 分 隔 的 属性 / 值 对 ， 元 素 之 间 用 逗号 隔 开 ， 
| 整个 列表 包含 在 大 括号 之 中 。 
| 【示例 2】 在 下 面 示例 中 ， 使 用 对 象 直接 量 定义 坐标 点 对 象 。 
var point = { // 定 义 对 象 
2 // 属 性 值 
y:-12 // 属 性 值 
| } 
“17.7.2 访问 对 象 
| 可 以 通过 点 号 运算 符 (.) 来 访问 对 象 的 属性 。 
| 【示例 1】 在 下 面 示例 中 ， 使 用 点 运算 符 访问 对 象 point 的 x 轴 坐 标 值 。 
| var point = { 
| 3 
| Y-1.2 
| 让 
| Var x = point.x: // 访 问 对 象 的 属性 值 
| 的 方法 人 0。 
var point = { 
f: functionO{ // 对 象 方法 
retum this.y: // 返 回 当前 对 象 属性 y 的 值 
| 
| 六 
| Ey // 对 象 属性 
| 上 
var y = point.f0; // 调 用 对 象 的 方法 


在 上 面 代码 中 ,使 用 关键 字 this 来 代表 当前 对 象 ,这 里 的 this 总 是 指向 调用 当前 方法 的 对 象 point。 
| 当 属 性 值 为 对 象 时 ， 就 可 以 设计 嵌 套 对 象 ， 可 以 连续 使 用 点 号 运算 符 访问 内 部 对 象 。 
| 【示例 3】 在 下 面 示例 中 ， 设 计 一 个 嵌 套 对 象 ， 然 后 连续 使 用 点 号 运算 符 访问 内 部 对 象 的 属性 a 


| 的 值 。 
| varpoint={ // 外 部 对 象 
| 2 // 嵌 套 对 象 
| ls // 内 部 对 象 的 属性 
| 2 
| 器 
| y:-12 // 外 部 对 象 的 属性 
二 
vara=pointx.a: // 访 问 嵌 套 对 象 的 属性 值 


| 
| 
| 会 提示 : 也 可 以 通过 集合 运算 符 (中) 来 访问 对 象 的 属性 ， 此 时 可 以 使 用 字符 囊 下 标 来 表示 属性 。 
| 例如 ， 针 对 上 面 示例 ， 可 以 使 用 下 面 方法 访问 训 套 对 象 的 属性 a 的 值 
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Var point= { | 
尖子 | 
ls | 
b:2 | / 
这 2 | 于 内 
四 Not. 
var a = point["x"]["a"]: // 访 问 嵌 套 对 象 的 属性 值 


下 标 字符 串 是 对 象 的 属性 名 ， 属 性 名 必须 加 上 引号 ， 表 示 为 下 标 字符 串 。 | 
17.8 使 用 数组 


对 象 是 无 序 的 数据 集合 ， 而 数组 (Array) 是 一 组 有 序数 据 集合 。 它 们 之 间 可 以 相互 转换 ， 但 是 
数组 拥有 大 量 方法 ， 适 合 完成 一 些 复杂 的 运算 。 
17.8.1 定义 数组 

定义 数组 通过 构造 函数 Array0 和 运算 符 new 来 实现 。 具 体 实现 方法 如 下 : 

回 ”定义 空 数 组 。 

Var a = new Array(): | 

通过 这 种 方式 定义 的 数组 是 一 个 没有 任何 元 素 的 空 数组 。 | 

回 ”定义 带 有 参数 的 数组 。 | 

var a = new Array(1,2,3,"4","5"); | 

数组 中 每 个 参数 都 表示 数组 的 一 个 元 素 值 ,数组 的 元 素 没有 类 型 限制 。 可 以 通过 数组 下 标 来 定位 
每 个 元 素 。 通 过 数组 的 length 属性 确定 数组 的 长 度 。 | 

回 “定义 指定 长 度 的 数组 。 | 

var a= new Array(6): | 

采用 这 种 方式 定义 的 数组 拥有 指定 的 元 素 个 数 , 但 是 没有 为 元 素 初始 化 赋值 ， 这 时 它们 的 初始 值 | 
都 是 undefined。 | 

定义 数组 时 ， 可 以 省 略 new 运算 符 ， 直 接 使 用 Array0 函 数 来 实现 。 例 如 ， 下 面 两 行 代码 的 功能 | 
是 相同 的 。 | 

var a= new Array(6): 

Var a= Array(6): 

定义 数组 直接 量 。 

Var a= [1,2.3."4"."5"]: 

使 用 中 括号 运算 符 定义 的 数组 被 称 为 数组 直接 量 ， 使 用 数组 直接 量 定义 数组 要 比 使 用 Array0 函 
数 定义 数组 速度 要 快 ， 操 作 更 方便 。 
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回 F 回 2 
17.8.2” 存 取 元 素 
ee 使 用 [运算 符 可 以 存 取 数组 元 素 的 值 。 在 方 括号 左边 是 数组 的 引用 ， 方 括号 内 是 非 负 整 数值 的 表 
EA 达 式 。 例 如 ， 通 过 下 面 方式 可 以 读 取 数组 中 第 三 个 元 素 的 值 ， 即 显示 为 “3”。 
Var a=[1,2,3,"4","5"]: 
ar 
| 通过 下 面 方式 可 以 修改 元 素 的 值 : 
vara=[1234"."5"]: 


a[2]=2; 
alert(a[2]); // 提 示 为 3 


| 

| 

| 【示例 1】 使 用 数组 的 length 属性 和 数组 下 标 可 以 遍历 数组 元 素 ， 从 而 实现 动态 控制 数组 元 素 。 在 
| 下 面 示例 中 通过 for 语句 遍历 数组 元 素 ， 把 数组 元 素 串联 为 字符 串 ， 输 出 显示 出 来 ， 如 图 17.12 所 示 。 


Var str = ""; // 声 明 临 时 变量 

vara=[1,2,.3,4,.5]; /定义 数组 

for(vari=0:i<alength:i++ ){ // 遍 历数 组 ， 把 数组 元 素 串联 为 一 个 字符 串 
str+=al]+"-"; 

} 

document write(a + "<br />"): // 读 取 数 组 的 值 

document.write(str); // 显 示 串 联 的 字符 串 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| | S sumvsienest hm p - So | B iocshoet 
| 
| 
| 
| 
| 
| 
| 
| 
| 


图 17.12 遍历 数组 元 素 
疱 提示 : 数组 的 大 小 不 是 固定 的 ， 可 以 动态 增加 或 删除 数组 元 素 。 
回 ”通过 改变 数组 的 length 属性 来 实现 。 
var a=[1.2.3,4.5]; 


在 上 面 示例 中 ， 可 以 看 到 当 改 变数 组 的 长 度 时, 会 自动 在 数组 的 末尾 增加 或 删除 元 素 ， 以 实现 改 
| 变数 组 的 大 小 。 

使 用 delete 运算 符 可 以 删除 数组 元 素 的 值 ， 但 是 不 会 改变 length 属性 的 值 。 

回 ”使 用 pushO 和 pop( 方 法 来 操作 数组 。 

使 用 push0 方 法 可 以 在 数组 的 末尾 插入 一 个 或 多 个 元 素 ， 使 用 pop0 方 法 可 以 依次 把 它们 从 数组 


| 中 删除 。 
【示例 2】 下 面 示例 使 用 push0 方 法 增加 数组 的 元 素 ， 然 后 使 用 pop0 方 法 删除 部 分 元 素 。 
| vara=[]: // 定 义 一 个 空 数组 
| apush(1.2,3): // 得 到 数组 a[1.2.3] 
a.push(4.5); // 得 到 数组 a[1.2.3.4.5] 
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a.popO: // 得 到 数组 a[1,2,3,4] 


使 用 时 ，pushO 可 以 带 多 个 任意 类 型 的 参数 ， 它 们 按 顺 序 被 插入 到 数组 的 末尾 ， je 
组 的 长 度 。pop() 方 法 不 带 参数 ， 返 回 数组 中 最 后 一 个 元 素 的 值 。 
加 ”使 用 unshifi0 和 shift0 方 法 。 
unshiftO 和 shift0 方 法 与 pashO0 和 pop0 方 法 操作 类 似 ， 但 是 作用 于 数组 的 头 部 。 | 
【示例 3】 下 面 示例 分 别 使 用 unshift0 方 法 增加 数组 的 元 素 ， 然 后 使 用 shift0 方 法 删除 部 分 元 素 。 国 狼 [ 纪 到 








var a=[]; // 定 义 一 个 空 数组 | 
aunshift(1.2.3): /得 到 数组 a[1.2.3] | 
a.unshift(4,5); // 得 到 数组 a[4.5.1.2.3] | 
ashifO:; /得 到 数组 a[5.1,2,3] 


回 ”使 用 splice0 方 法 。 | 
该 方法 是 一 个 通用 删除 和 插入 元 素 的 方法 ， 它 可 以 在 数组 指定 的 位 置 开 始 删除 或 插入 元 素 。 | 
splice0 方 法 包含 3 个 参数 : 第 一 个 参数 指定 插入 的 起 始 位 置 , 第 二 个 参数 指定 要 删除 元 素 的 个 数 ，| 

第 三 个 参数 表示 插入 的 具体 元 素 。 | 
【示例 4】 在 下 面 这 个 示例 中 ，splice0 方 法 从 第 二 个 元 素 后 开始 截取 两 个 元 素 ， 然 后 把 这 个 截取 | 
的 新 子 数组 〈[3.4]) 赋 给 变量 b， 而 原来 的 数组 a 的 值 为 [1,2,5,6]。 | 
Var a = [1,2,3,4,5,6]: | 

| 


var b = a.splice(2.2): 
document.write(a + "<br />"): // 输 出 [1.2.5.6] 
document.write(b): /输出 [3,4] 


【示例 5 在 下 面 示例 中 ,使 用 splice0 方 法 从 第 二 个 元 素 后 开始 截取 两 个 元 素 , 然后 把 这 个 截取 
的 新 子 数组 〈[3,4] ) 赋 给 变量 b， 而 原来 的 数组 a 的 值 为 [1,2, 7,8,9,5,6]。 也 就 是 说 ，splice0 方 法 内 的 
第 3 个 参数 开始 被 作为 新 元 素 插入 到 指定 起 始 位 置 后 面 ， 并 把 后 面 的 元 素 向 后 推移 。 


var a= [1.2.3.4.5.6]: 

var b = a.splice(2.2.7.8.9); | 
document.write(a + "<br />"): // 输 出 [1.2. 7.8.9.5.6] | 
document write(b); /输出 3.4] | 


17.8.3 ”应 用 数组 


利用 数组 对 象 包含 的 众多 方法 ， 可 以 对 数组 进行 更 加 复杂 的 操作 。 用 户 可 以 参阅 本 书 附 赠 的 
JavaScript 参考 手册 详细 了 解数 组 (Array) 对 象 的 每 一 种 方法 。 
1. 数组 与 字符 囊 互 转 


在 开发 中 经 常 需要 把 字符 串 辟 开 为 一 个 数组 ， 或 者 把 数组 合并 为 字符 串 。 
【示例 1】 使 用 Array 对 象 的 join0 方 法 可 以 把 数组 转换 为 多 种 形式 的 字符 串 。join0 方 法 包含 一 

个 参数 ， 用 来 定义 合并 元 素 的 连 字符 。 如 果 join0 方 法 不 提供 参数 ， 则 以 逗号 连接 每 个 元 素 。 

在 下 面 示 例 中 ，join0 方 法 使 用 参数 提供 的 连 字符 把 数组 a 中 的 元 素 连 接 在 一 起 ， 生 成 一 个 字符 
串 ， 如 图 17.13 所 示 。 

var a= [1.2.3.4.5]; 

a=ajoin("-"): 

document.write("a 类 型 = "+ typeof(a)+"<br />"); 

document.write("a 的 值 =" + a): 
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| 使 用 split0 方 法 可 以 把 字符 串 劈 开 为 一 个 数组 ， 该 方法 包含 两 个 参数 ， 第 一 个 参数 指定 劈 开 的 分 
| 隔 符 ， 第 二 个 参数 指定 返回 数组 的 长 度 。 
| 【示例 2】 针 对 上 面 示例 ， 使 用 split0 方 法 把 转换 后 的 字符 串 重新 劈 开 为 数组 ， 如 图 17.14 所 示 。 


< Emo ER 


x :天 型 =objcet 
be Ss mr o- sc s 的 值 = 1.2.3.4.5 


a 类 型 =string 
3 的 值 = 1-2-3-4-5 





图 17.13 ”把 数组 转换 为 字符 串 图 17.14 把 字符 串 转换 为 数组 


Vara= [1,2.3.4.5]: 

a 一 ajoin('- 

Var s = a.split("-"): 

document.write("s 类 型 =" + typeof(s)+"<br />"); 
document.write("s 的 值 =" +s); 


2. 数组 排 顺 


使 用 reverse() 方 法 可 以 颠倒 数组 元 素 的 顺序 。 该 方法 是 在 原 数组 基础 上 进行 操作 的 ， 不 会 新 建 
数组 。 

【示例 3】 在 下 面 这 个 示例 中 使 用 reverse0 方 法 把 数组 [1,2,3,4,5] 元 素 的 顺序 调整 为 [5,4,3,2,1]。 

Var a= [1,2,3,4,5]; 

var a= a.reverse(): 

document. write(a):; 1/ 输出 [5.4.3.2.1] 

sort0 方 法 能 够 对 数组 中 的 元 素 进 行 排序 ， 排 序 的 方法 通过 其 参数 来 决定 。 这 个 参数 是 一 个 比较 
两 个 元 素 值 的 闭 包 。 如 果 省 略 参数 ， 则 sort0 方 法 将 按 默认 的 规则 对 数组 进行 排序 。 

【示例 4】 在 下 面 这 个 示例 中 定义 排序 函数 为 function(x,y){return x-y;}， 然 后 把 该 函数 传递 给 
sort() 方 法 ， 则 数组 [3,2.5,1.4] 将 会 按 从 大 到 小 的 顺序 排列 ， 返 回 [5,4.3,.2.1]， 如 图 17.15 所 示 。 

Var a= [3,2,5.1,4]; 

Varf= function(x.y){ 
| Tetum y-x: 
| 下 
| var b = a.sort(D): 
| 
| 
| 
| 





document. write(b): /| 输出 [5.4.3.2.1] 


Oe econ o- so] Socanor | 





图 17.15 数组 排序 
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如 果 不 设 置 参数 ， 或 者 设置 “varb = asort(function(x.y){fretum x-y:));”， 则 b 为 [1,2,3,4,5]。 

3. 连接 数组 

concat0 方 法 能 够 把 该 方法 中 的 参数 追加 到 指定 数组 中 ， 形 成 一 个 新 的 连接 数组 。 例 如 : 区 
var a=[1,2,3,4.5]: | 身 - 
a : 1/ 输出 [1.2,3,4.5,4.5] 
如 果 concat0 方 法 中 的 参数 包含 数组 ， 则 把 数组 元 素 展开 添加 到 数组 中 。 例 如 : | 
var a= [1,2,3,4.5]:; | 
var b = a.concat([4.5].[1.[2.3]]): 
document.write(b); /| 输出 [1,2,3,4.5.4.5.1.2.3] | 

4 截取 子 数 组 

| 


slice() 方 法 将 返回 数组 中 指定 的 片段 ,所 谓 片段 就 是 数组 中 的 一 个 子 数组 。 该 方法 包含 两 个 参数 ， 
它们 指定 要 返回 子 数组 在 原 数 组 中 的 起 止 点 。 其 中 第 一 个 参数 指定 的 元 素 在 被 截取 的 范围 之 内 , 而 第 | 
二 个 参数 指定 的 元 素 不 被 截取 。 
【示例 5】 在 下 面 示例 中 将 返回 数组 a 中 第 三 个 元 素 到 第 六 个 元 素 前 面 的 3 个 元 素 组 成 的 子 数 组 。 | 
Var a= [1.2.3.4.5.6.7.8.9]: | 
var b = a.slice(2,5); 
document.write(b): /输出 6.4.5] 























17.9 案例 实战 


本 节 为 线 上 拓展 内 容 ， 介 绍 JavaScript 高 级 使 用 技巧 。 
17.9.1 使 用 constructor 检测 数据 类 型 


对 于 对 象 、 数 组 等 复杂 数据 ， 可 以 使 用 Object 对 象 的 constructor 属性 
进行 检测 。 详 细 说 明 请 扫 码 阅读 。 
17.9.2 ”使 用 toString 检测 数据 类 型 


使 用 toString0 方 法 可 以 设计 一 种 更 安全 的 检测 JavaScript 数据 类 型 的 方法 ， 
用 户 还 可 以 根据 开发 需要 进一步 补充 检测 类 型 的 范围 。 详 细 说 明 请 扫 码 阅读 。 


17.9.3 值 类 型 转换 


JavaScript 能 够 自动 转换 变量 的 数据 类 型 。 这 种 转换 都 是 隐 性 的 和 自动 
的 ， 不 需要 手动 设置 。 详 细 说 明 请 扫 码 阅读 。 
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17.9.4 引用 类 型 转换 


国 | 对 象 在 不 同 运算 环境 中 转换 规则 是 不 同 的 。 详 细 说 明 请 扫 码 阅读 。 
















te 国电 站 
线 上 阅读 视频 讲解 
17.9.5 ”转换 为 字符 串 
台 涅 。 。 把 值 转换 为 字符 串 有 丙种 方法 。 详 细 说 明 请 扫 码 阅读 。 





人 
线 上 阅读 


17.9.6 ”转换 为 数字 





eh: 
视频 讲解 


加 使 用 parseInt0 可 以 把 值 转换 为 整数 ， 使 用 parseFloat0 可 以 把 值 转换 


为 浮 点 数 。 详 细 说 明 请 扫 码 阅读 。 






线 上 阅读 视频 讲解 


17.9.7 ”转换 为 布尔 值 


把 值 转换 为 布尔 值 有 两 种 快捷 方法 。 详 细 说 明 请 扫 码 阅读 。 


线 上 国 计 视频 讲解 
17.9.8 ”强制 转换 


使 用 Boolean0、Number()、String0 可 以 把 参数 值 转换 为 布尔 值 、 数 
值 和 字符 串 。 详 细 说 明 请 扫 码 阅读 。 





17.9.9 使 用 Arguments 对 象 
国 ; 郁 知 3 回国 卫 玖 国 









Arguments 对 象 表示 参数 集合 ， 它 是 一 个 伪 类 数组 ， 拥 有 与 数组 相似 
的 结构 ， 可 以 通过 数组 下 标的 形式 访问 函数 实 参 值 , 但 是 没有 Array 原型 


罩 方法 。 详 细 说 明 请 扫 码 阅读 。 


间 
线 上 阅读 视频 讲解 
17.9.10 ”使 用 call() 和 apply() 

蜂 call0 和 apply0 是 Function 对 象 的 原型 方法 ， 它 们 能 够 将 特定 函数 当 
作 一 个 方法 绑 定 到 指定 对 象 上 并 进行 调用 。 详 细 说 明 请 扫 码 阅读 。 
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17.9.11 使 用 this 


this 是 函数 体内 自 带 的 一 个 对 象 指针 ， 它 能 够 始终 指向 调用 对 象 。 
当 函 数 被 调用 时 ， 使 用 this 可 以 访问 调用 对 象 。 详 细 说 明 请 扫 码 阅读 。 

















17.9.12 ”函数 调用 模式 


在 JavaScript 中 ， 共 有 4 种 函数 调用 模式 : 方法 调用 模式 、 函 数 调 
用 模式 、 构 造 器 调用 模式 和 apply 调用 模式 .这些 模式 在 如 何 初始 化 this 
上 存在 差异 。 详 细 说 明 请 扫 码 阅读 。 





17.10 在 线 练 习 


JavaScript 语 言 基础 练习 。 
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操作 DOM 


DOM ( Document Object Model， 文 档 对 象 模型 ) 是 W3C 制定 的 一 套 技术 规范 ， 用 来 描述 
JavaScript 脚本 怎样 与 HTML 或 XML 文档 进行 交互 的 Web 标准 。 本 章 将 简单 介绍 DOM 的 基 


本 概念 和 操作 ， 


【 学 习 要 点 】 


| 


怠 台 吾 吾 


了 解 DOM 

使 用 JavaScript 操作 节点 

使 用 JavaScript 操作 文档 

使 用 JavaScript 操作 元 素 

使 用 JavaScript 操作 文本 和 属性 


第 18 章 欣 作 DOM 






18.1 使 用 节点 





DOM 1 级 定义 了 Node 接口 ， 该 接口 为 DOM 的 所 有 节点 类 型 定义 了 原始 类 型 。JavaScript 实现 ， 





属性 和 方法 。 
18.1.1 节点 类 型 


DOM 规定 : 整个 文档 是 一 个 文档 节点 ， 每 个 标签 是 一 个 元 素 节点 ， 元 素 包含 的 文本 是 文本 节点 ， | 
元 素 的 属性 是 一 个 属性 节点 ， 注 释 属于 注释 节点 ， 如 此 等 等 。 | 
每 个 节点 都 有 一 个 nodeType 属性 ， 用 于 表明 节点 的 类 型 。 使 用 nodeType 属性 返回 值 可 以 判断 一 | 
个 节点 的 类 型 ,常用 值 说 明 如 下 : 元 素 的 nodeType 值 为 1, 属性 的 nodeType 值 为 2, 文本 的 nodeType | 
值 为 3， 文档 的 nodeType 值 为 9， 其 他 值 可 以 参考 DOM 参考 手册 。 | 


18.1.2 ”节点 名 称 和 值 


加 各 的 二 
使 用 节点 的 nodeName 和 nodeValue 属性 可 以 读 取 节点 的 名 称 和 值 。 这 两 个 属性 的 值 完 全 取决 于 | 视频 讲解 
节点 的 类 型 ， 常 用 值 说 明 如 表 18.1 所 示 ， 其 他 值 可 以 参考 DOM 参考 手册 。 | 


表 18.1 常用 节点 的 nodeName 和 nodeValue 属性 说 明 


| 
| 
节点 类 型 nodeValue 返回 值 | 
Document mall | 
Element 元 素 的 名 称 〈 或 标签 名 称 ) null 
Attr 属性 的 名 称 属性 的 值 





Text | nx | 节点 的 内 容 


【示例 】 在 下 面 示例 中 ， 先 检查 节点 类 型 ， 看 是 不 是 元 素 。 如 果 是 ， 则 读 取 nodeName 的 值 。 对 
于 元 素 节点 ，nodeName 中 保存 的 始终 都 是 元 素 的 标签 名 ， 而 nodeValue 的 值 则 始终 为 null。 | 


varnode = document.getElementsByTagName("body")[0]: 
if (node.nodeType—1) 

var value = node.nodeName: 
console.log(value): 


nodeName 属性 在 处 理 标签 时 比较 实用 ， 而 nodeValue 属性 在 处 理 文本 信息 时 比较 实用 。 
18.1.3 ”访问 节点 
DOM 为 Node 类 型 定义 如 下 属性 ， 以 方便 JavaScript 对 文档 树 中 每 个 节点 进行 遍历 。 

















ownerDocument: 返回 当前 节点 的 根 元 素 (document 对 象 ) 。 
parentNode: 返回 当前 节点 的 父 节点 。 所 有 的 节点 都 仅 有 一 个 父 节点 。 
回 childNodes: 返回 当前 节点 的 所 有 子 节点 的 节点 列表 。 

加 ”firstChild: 返回 当前 节点 的 首 个 子 节点 。 
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| lastChild: 返回 当前 节点 的 最 后 一 个 子 节点 。 
| nextSibling: 返回 当前 节点 之 后 相 邻 的 同 级 节点 。 
| previousSibling: 返回 当前 节点 之 前 相 邻 的 同 级 节点 。 


名 18.14 编辑 节点 


Node 类 型 为 所 有 节点 定义 了 很 多 原型 方法 ， 以 方便 对 节点 进行 操作 ， 其 中 获得 所 有 浏览 器 一 至 
天 昌 支持 的 方法 如 表 18.2 所 示 。 
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表 18.2 Node 类 型 原型 方法 说 明 


| 方 法 说 明 

| appendChildO 向 节点 的 子 节点 列表 的 结尾 添加 新 的 子 节点 

| cloneNode() 复制 节点 
hasChildNodesO 判断 当前 节点 是 否 拥 有 子 节点 
insertBefore() 在 指定 的 子 节点 前 插入 新 的 子 节点 
normalizeO 合并 相 邻 的 Text 节点 并 删除 空 的 Text 节点 
removeChildO 删除 (并 返回 ) 当前 节点 的 指定 子 节点 
replaceChild() 用 新 节点 替换 一 个 子 节点 


其 中 ，appendChild0 、insertBefore0 、removeChild0 、replaceChild(0 方 法 用 于 对 子 节点 进行 插入 、 
删除 和 蔡 换 操 作 。 要 使 用 这 几 个 方法 必须 先 取 得 父 节 点 ， 可 以 使 用 parentNode 属性 。 另 外 ， 并 不 是 
所 有 类 型 的 节点 都 有 子 节点 ， 如 果 在 不 支持 子 节点 的 节点 上 调用 了 这 些 方法 将 会 导致 错误 发 生 。 
cloneNode() 方 法 用 于 复制 节点 ， 用 法 如 下 : 

nodeObiect.cloneNode(include all) 


参数 include_all 为 布尔 值 ， 如 果 为 rue， 那么 将 会 复制 原 节点 ， 以 及 所 有 子 节点 ; 为 false 时 ， 仅 
复制 节点 本 身 。 复 制 后 返回 的 节点 副本 属于 文档 所 有 ， 但 并 没有 为 它 指定 父 节 点 ， 需 要 通过 
appendChild()、insertBeforeO 或 replaceChild0 方 法 将 它 添加 到 文档 中 。 


18.2 使 用 文档 


在 DOM 规范 中 ，Document 类 型 表示 文档 节点 , HTMLDocument 是 Document 的 子 类 ，document 
对 象 是 HIMLDocument 的 实例 , 它 表 示 HTML 文档 。 同 时 ，document 对 象 又 是 window 对 象 的 属性 ， 
因此 可 以 在 全 局 作用 域 中 直接 访问 document 对 象 。Document 节点 具有 如 下 特征 : 
nodeType 值 为 9。 
nodeName 值 为 "#document"。 
nodeValue 值 为 null。 
parentNode 值 为 null。 
ownerDocument 值 为 null。 
其 子 节点 可 能 是 : DocumentType (最 多 一 个 ) 、Element (最 多 一 个 ) 、ProcessingInstruction 


或 Comment。 

















加 


回回 加 加 加 
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18.2.1 访问 文档 子 节点 


访问 文档 子 节点 的 方法 有 两 种 : 

使 用 documentElement 属性 ， 该 属性 始终 指向 HTML 页 面 中 的 html 元 素 。 
使 用 childNodes 列表 访问 文档 元 素 。 

例如 ， 下 面 代码 都 可 以 找到 html 元 素 ， 不 过 使 用 documentElement 属性 更 快捷 。 


Var html = document.documentElement: | 
var html = document.childNodes[0]: | 
var html = document.firstChild; 


document 对 象 有 一 个 body 属性 ， 使 用 它 可 以 访问 body 元 素 。 例 如 : 
var body = document.body: 


所 有 浏览 器 都 支持 document.documentElement 和 document.body 用 法 。 
<!DOCTYPE> 标 签 是 一 个 与 文档 主体 不 同 的 实体 ， 可 以 通过 doctype 属性 访问 它 。 例 如 : 


Var doctype = document.doctype: 





志 狼 注意 : 不 要 为 document 对 象 调用 appendChild0、removeChild0 和 replaceChild() 方 法 来 为 文档 添 
加 、 删 除 或 替换 子 节点 ， 因 为 文档 类 型 是 只 读 的 ,而 且 文 档 只 能 有 一 个 固定 的 元 素 子 节点 。 | 


18.2.2 ”访问 文档 信息 


HTMLDocument 的 实例 对 象 document 包含 很 多 属性 用 来 访问 文档 信息 ， 简 单 说 明 如 下 : 

title: 设置 或 返回 <title> 标 签 包含 的 文本 信息 。 

lastModified: 返回 文档 最 后 被 修改 的 日 期 和 时 间 。 

URL: 返回 当前 文档 的 完整 URL， 即 地 址 栏 中 显示 的 地 址 信息 。 

domain: 返回 当前 文档 的 域名 。 

referrer: 返回 链接 到 当前 页 面 的 那个 页 面 的 URL。 在 没有 来 源 页 面 的 情况 下 ，referrer 属性 
中 可 能 会 包含 空 字符 串 。 

实际 上 ， 上 面 这 些 信息 都 存在 于 请 求 的 HTTP 头 部 ， 不 过 通过 这 些 属 性 更 方便 用 户 在 JavaScript | 
中 访问 它们 。 | 


18.2.3 ”访问 文档 元 素 


document 对 象 包含 多 个 访问 文档 内 元 素 的 方法 ， 简 单 说 明 如 下 : | 

getElementById0: 返回 指定 id 属性 值 的 元 素 。 注 意 ，id 值 要 区 分 大 小 写 ， 如 果 找到 多 个 id | 
相同 的 元 素 ， 则 返回 第 一 个 元 素 ， 如 果 没 有 找到 指定 id 值 的 元 素 ， 则 返回 null。 

加 ”getElementsBByTagName(): 返回 所 有 指定 标签 名 称 的 元 素 节点 。 

getElementsByName0: 返回 所 有 指定 名 称 (name 属性 值 ) 的 元 素 节点 。 该 方法 多 用 于 表单 
结构 中 ， 用 于 获取 单 选 按钮 组 或 复 选 框 组 。 


安 提示 : getElementsByTagName() 方 法 返回 的 是 一 个 HIMLCollection 对 象 ， 与 nodeList 对 象 类 似 ， 
可 以 使 用 方 括号 语法 或 者 item() 方 法 访问 HIMLCollection 对 和 象 中 的 元 素 ， 并 通过 length 
属性 取得 这 个 对 象 中 元 素 的 数量 。 




















回回 加 图 加 
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| 【示例 】HTMLCollection 对 象 还 包含 一 个 namedItem() 方 法 ， 该 方法 可 以 通过 元 素 的 name 特性 
取得 集合 中 的 项 目 。 下 面 示例 可 以 通过 “namedItem("news");” 方 法 找到 HIMLCollection 对 象 中 name 
| | 为 news 的 图 片 。 


| <script> 

Var images = document.getElementsByTagName("ime"): 
Var news = images.namedItem("news"); 
</scrip> 

还 可 以 使 用 下 面 用 法 获取 页 面 中 的 所 有 元 素 ， 其 中 参数 “*” 表 示 所 有 元 素 。 
var allElements = document.getElementsByTagName("*"): 

IE6 及 其 以 下 版 本 浏览 器 对 其 不 支持 ， 对 于 正 浏览 器 来 说 ， 可 以 使 用 document.all 来 获取 文档 中 
| 所 有 元 素 的 节点 。 


18.2.4 ”访问 文档 集合 


document 对 象 定义 了 一 些 集合 属性 ， 这 些 集合 都 是 HTMLCollection 对 象 ， 为 访问 文档 常用 对 象 
| 提供 了 快捷 方式 ， 简 单 说 明 如 下 
| 回 。 document.anchors: 返回 文档 中 所 有 Anchor 对 象 ， 即 所 有 带 name 特性 的 <a> 标 签 。 
| 回 ”document.applets: 返回 文档 中 所 有 Applet 对 象 ， 即 所 有 <applet> 标 签 ， 不 再 推荐 使 用 。 
| 加 ”document.forms: 返回 文档 中 所 有 Form 对 象 ， 与 document.getElementsByTagName("form") 
| 得 到 的 结果 相同 。 
































加 ”document.images: 返回 文档 中 所 有 Image 对 象 ， 与 document.getElementsByTagName("img") 
得 到 的 结果 相同 。 
回 documentlinks: 返回 文档 中 所 有 Area 和 Link 对 象 ， 即 所 有 带 href 特性 的 <a> 标 签 。 








18.3 使 用 元 素 


Element 是 元 素 节点 类 型 ， 它 具有 以 下 特征 : 

回 nodeType 值 为 1。 

nodeName 值 为 元 素 的 标签 名 称 ， 也 可 以 使 用 tagName 属性 。 在 HTML 中 ,返回 标签 名 始终 
为 大 写 ， 在 脚本 中 比较 需要 全 部 小 写 化 : ifl(element.tagName.toLowerCase( 一 "div"){ }。 

nodeValue 值 为 null。 

parentNode 是 Document 或 Element 类 型 节点 

子 节点 可 能 是 Element、Text、Comment、 ProcessingInstruction 、CDATASection 或 者 
EntityReference 。 

所 有 HIML 元 素 都 是 HIMLElement 类 型 或 者 其 子 类 型 的 实例 ，HIMLElement 又 是 Element 的 

| | 了 类 在 继承 Element 类 型 时 添加 了 一 些 属性 ， 添 加 的 这 些 属性 分 别 对 应 于 每 个 HTML 元 素 下 列 标 

| 准 特性 。 
id: 元 素 在 文档 中 的 唯一 标识 符 。 
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title: 有 关 元 素 的 附加 说 明 信 息 ， 一 般 通过 工具 提示 条 显示 出 来 。 
lang: 元 素 内 容 的 语言 编码 ， 很 少 使 用 。 | 
dir: 语言 方向 ， 值 为 "ltr" (从 左 至 右 ) 、"rl” 〈 从 右 至 左 ) ， 很 少 使 用 。 | 
className: 与 元 素 的 class 特性 对 应 ， 即 为 元 素 指定 的 CSS 类 样式 。 | 全 内 
上 述 这 些 属性 都 可 以 用 来 取得 或 修改 相应 的 特性 值 。 | 六 


18.3.1 访问 元 素 


1. getElementById() 方 法 
使 用 getElementById0 方 法 可 以 准确 获取 文档 中 的 指定 元 素 。 用 法 如 下 : 
document.getElementById(ID) | 
| 
参数 ID 表示 文档 中 对 应 元 素 的 id 属性 值 。 如 果 文 档 中 不 存在 指定 元 素 ， 则 返回 值 为 null。 该 方 | 
法 只 适用 于 document 对 象 。 | 
【示例 1】 在 下 面 示例 中 ， 使 用 getElementById0 方 法 获取 <div id="box"> 对 象 的 引用 ， 然 后 使 用 
nodeName、nodeType、parentNode 和 childNodes 属性 查看 该 对 象 的 节点 名 称 、 节 点 类 型 、 父 节点 和 | 
第 一 个 子 节点 的 名 称 。 | 


加 回回 加 





| 视频 讲解 


<div id-"box 吃 盒子 <Jdiv> 

<script> 

Var box = document.getElementById("box"); /获取 指定 盒子 的 引用 
var info = "nodeName: "+box.nodeName: // 获 取 该 节点 的 名 称 
info += "modeType: "+ box.nodeType: // 获 取 该 节点 的 类 型 


| 
| 
info += "\rparentNode: "+box.parentNode nodeName: // 获 取 该 节点 的 父 节点 名 称 | 
info += "childNodes: "+ box.childNodes[0].nodeName: // 获 取 该 节点 的 子 节点 名 称 | 
alert(info): /显示 提示 信息 
</scrip> 
2. getElementByTagName() 方 法 | 
使 用 getElementByTagName() 方 法 可 以 获取 指定 标签 名 称 的 所 有 元 素 。 用 法 如 下 : 
document.getElementsByTagName(tagName) | 
参数 tagName 表示 指定 名 称 的 标签 , 该 方法 返回 值 为 一 个 节点 集合 , 使 用 length 属性 可 以 获取 集 | 
合 中 包含 元 素 的 个 数 ， 利 用 下 标 可 以 访问 其 中 某 个 元 素 对 象 。 
【示例 2】 下 面 代码 使 用 for 循环 获取 每 个 p 元 素 ， 并 设置 p 元 素 的 class 属性 为 “red”。 


varp = document.getElementsByTagName("p"): // 获 取 p 元 素 的 所 有 引用 
for(var 二 0:i<pJength:itH){ // 饥 历 p 数据 集合 

plil.setAttribute("class","red"): // 为 每 个 p 元 素 定义 red 类 样式 
} 


18.3.2 ”创建 元 素 


createElement0 方 法 能 够 根据 参数 指定 的 标签 名 称 创建 一 个 新 的 元 素 ， 并 返回 新 建 元 素 的 引用 ， 
用 法 如 下 : 
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Var element = document.createElement("tagName"): 


其 中 ，element 表示 新 建 元 素 的 引用 ，createElement0 是 document 对 象 的 一 个 方法 ， 该 方法 只 有 

一 个 参数 ， 用 来 指定 创建 元 素 的 标签 名 称 。 
全 | 【示例 1】 下 面 代码 在 当前 文档 中 创建 了 一 个 段落 标记 p， 并 把 该 段落 的 引用 存储 到 变量 p 中 。 

| | 由 于 该 变量 表示 一 个 元 素 节点 ， 所 以 它 的 nodeType 属性 值 等 于 1， 而 nodeName 属性 值 等 于 p。 
varp = document.createElement("p"): // 创 建 段落 元 素 
| var info = "nodeName: "+p.nodeName;  ”// 获 取 元 素 名 称 
| info += "，nodeType: "+ pnodeType: /获取 元 素 类 型 ， 如 果 为 1 则 表示 元 素 节点 

alert(info): 

| 使 用 createElement0 方 法 创建 的 新 元 素 不 会 被 自动 添加 到 文档 里 ， 因 为 新 元 素 还 没有 nodeParent 
| 属性 ， 仅 在 JavaScript 上 下 文中 有 效 。 如 果 要 把 这 个 元 素 添加 到 文档 里 ， 还 需要 使 用 appendChild0、 
| insertBefore() 或 replaceChild0 方 法 实现 。 

| 【示例 2】 下 面 代码 演示 如 何 把 新 创建 的 p 元 素 增加 到 body 元 素 下 。 

| varp = documentcreateElement("p"): // 创 建 段落 元 素 
| document.body.appendChild(p); // 增 加 段落 元 素 到 body 元 素 下 


18.3.3 ”复制 元 素 





| cloneNode() 方 法 可 以 创建 一 个 节点 的 副本 。 
| 【示例 】 在 下 面 示 例 中 ， 首 先 创建 一 个 节点 p， 然 后 复制 该 节点 为 pb1， 再 利用 nodeName 和 
| nodeType 属性 获取 复制 节点 的 基本 信息 ， 该 节点 的 信息 与 原来 创建 的 节点 基本 信息 相同 。 


varp = document.createElement("p"); /1/ 创 建 节点 

var pl = p.cloneNode(false); // 复 制 节点 

var info = "nodeName: "+pl.nodeName: // 获 取 复制 节点 的 名 称 

info +=", nodeType: "+pl.nodeType: 1/ 获取 复 制 节点 的 类 型 

alert(info); // 显 示 复制 节点 的 名 称 和 类 型 相同 
18.3.4 插入 元 素 


在 文档 中 插入 节点 主要 包括 两 种 方法 。 
| 1. appendChild0 方 法 

”appendChild0 方 法 可 向 当前 节点 的 子 节点 列表 的 末尾 添加 新 的 子 节点 。 用 法 如 下 : 
| appendChild(newchild) 

| 参数 newchild 表示 新 添加 的 节点 对 象 ， 并 返回 新 增 的 节点 。 

| 

| 





【示例 1】 下 面 示例 展示 了 如 何 把 段落 文本 增加 到 文档 中 指定 的 div 元 素 中 ， 使 它 成 为 当前 节点 
| 的 最 后 一 个 子 节点 。 


| <div id="box"></div> 

| scrip> 

| varp = document.createElement("p"): 1/ 创建 段 落 节点 

| var txt= documentcreateTextNode(" 盒 模型 "): // 创 建文 本 节点 ， 文 本 内 容 为 “ 盒 模型 ” 
Pp.appendChild(txt): // 把 文本 节点 增加 到 段落 节点 中 
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document.getElementById("box").appendChild(p); /获取 id 为 box 的 元 素 ， 把 段落 节点 增加 进来 








</script> | 
| 
如 果 文 档 树 中 已 经 存在 参数 节点 ， 则 将 从 文档 树 中 删除 ， 然 后 重新 插入 新 的 位 置 。 如 果 添 加 的 节 | 
点 是 DocumentFragment 节点 ， 则 不 会 直接 插入 ， 而 是 把 它 的 子 节点 按 序 插入 当前 节点 的 末尾 。 | 全 
2. insertBefore() 方 法 | 
使 用 insertBefore0 方 法 可 在 已 有 的 子 节点 前 插入 一 个 新 的 子 节点 。 用 法 如 下 : 


其 中 ， 参 数 newchild 表示 插入 新 的 节点 ，refchild 表示 在 此 节点 前 插入 新 节点 。 
【示例 2 针对 示例 1, 如 果 把 蓝 盒子 移动 到 红 盒子 所 包含 的 标题 元 素 的 前 面 , 使 用 appendchildg | 
方法 是 无 法 实现 的 ， 此 时 不 妨 使 用 insertBefore0 方 法 来 实现 。 


var ok = document.getElementById("ok"); // 获 取 按 钮 元 素 的 引用 
ok.onclick = functionO{ // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函 数 
var red = document.getElementById("red"): // 获 取 红 色 盒子 的 引用 
varblue = document.getElementById("blue"): /获取 蓝 色 盒子 的 引用 
var hl = document.getElementsByTagName("h1")[0]: /获取 标题 元 素 的 引用 
red.insertBefore(blue, h1); // 把 蓝 色 盒子 移动 到 红色 盒子 内 ， 且 位 于 标题 前 面 


当 单 击 “ 移 动 ” 按 钮 之 后 ， 则 蓝 色 盒子 被 移动 到 红色 盒子 内 部 ， 且 位 于 标题 元 素 前 面 ， 效 果 | 
如 图 18.1 所 示 。 | 








| 
| 

| 

| 

| 

| 

| 

} | 
| 

| 

| 

| 

| 

| 
































移动 前 移动 后 


图 18.1 使 用 insertBefore0 方 法 移动 元 素 
疡 提示 : insertBefore 0 方法 与 appendChild0 方 法 一 样 ， 可 以 把 指定 元 素 及 其 所 包含 的 所 有 子 节 ， 
一 起 插入 到 指定 位 置 中 。 同 时 会 先 删除 移动 的 元 素 ， 然 后 再 重新 插入 到 新 的 位 置 。 

18.3.5 ”删除 元 素 


removeChild0 方 法 可 以 从 子 节点 列表 中 删除 某 个 节点 。 用 法 如 下 : 
nodeObject.removeChild(node) | 
参数 node 为 要 删除 的 节点 。 如 果 删 除 成 功 ， 则 返回 被 删除 的 节点 ， 如 果 失败 ， 则 返回 null。 


当 使 用 removeChild0 方 法 删除 节点 时 ， 该 节点 所 包含 的 所 有 子 节 点 将 同时 被 删除 。 
【示例 】 在 下 面 的 示例 中 单 击 按钮 时 将 删除 红 盒子 中 的 一 级 标题 。 
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<div id="red"> 
<hl> 红 盒子 </hl> 
</div> 
<div id="blue"> 蓝 盒子 </div> 
人 | <button id="ok"> 移 动 </button> 
天 <scrip> 
| Var ok = document.getElementById("ok"): // 获 取 按钮 元 素 的 引用 
ee // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函数 
| var red = document.getElementById("red"): // 获 取 红 色 盒子 的 引用 
varhl = document.getElementsByTagName("h1")[0]: /获取 标题 元 素 的 引用 
red.removeChild(h1): /移出 红 盒子 包含 的 标题 元 素 
} 
</script> 
如 果 想 删除 蓝 色 盒子 ， 但 是 又 无 法 确定 它 的 父 元 素 ， 此 时 可 以 使 用 parentNode 属性 来 快速 获取 
父 元 素 的 引用 ， 并 借助 这 个 引用 来 实现 删除 操作 。 


| 18.3.6 ”替换 节点 


replaceChild0 方 法 可 以 将 某 个 子 节点 蔡 换 为 男 一 个 。 用 法 如 下 : 
nodeObject.replaceChild(new_node.old node) 

| 其 中 ， 参 数 new_node 为 指定 新 的 节点 ，old_node 为 被 蔡 换 的 节点 。 如 果 蔡 换 成 功 ， 则 返回 被 蔡 
| 换 的 节点 ， 如 果 蔡 换 失败 ， 则 返回 null。 

| 【示例 1】 以 上 节 示 例 为 基础 重 写 脚本 ， 新 建 一 个 二 级 标题 元 素 ， 并 蔡 换 掉 红色 盒子 中 的 一 级 标 
| 








| 题 元 素 。 
| var ok = document.getElementById("ok"): /获取 按钮 元 素 的 引用 
ok.onclick = functionO{ // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函 数 
| varred = document.getElementById("red"); /获取 红色 盒子 的 引用 
| varhl = document.getElementsByTagName("h1")[0]:// 获 取 一 级 标题 的 引用 
| var h2 = document.createElement("h2"): // 创 建 二 级 标题 元 素 并 引用 
red.replaceChild(h2.h1): // 把 一 级 标题 替换 为 二 级 标题 
} 





演示 发 现 ， 当 使 用 新 创建 的 二 级 标题 来 蔡 换 一 级 标题 之 后 , 原来 的 一 级 标题 所 包含 的 标题 文本 已 
经 不 存在 了 。 这 说 明 替 换 节 点 的 操作 不 是 蔡 换 元 素 名 称 ,而 是 替换 其 包含 的 所 有 子 节点 ， 以 及 其 包含 
的 所 有 内 容 。 
| 同样 的 道理 ， 如 果 蔡 换 节点 还 包含 子 节点 ， 则 子 节点 将 一 同 被 插入 到 被 蔡 换 的 节点 中 。 可 以 借助 
| replaceChild( 方 法 在 文档 中 使 用 现 有 的 节点 蔡 换 另 一 个 存在 的 节点 。 

【示例 2】 在 下 面 示例 中 使 用 蓝 盒子 替换 掉 红 盒子 中 包含 的 一 级 标题 元 素 。 此 时 可 以 看 到 ， 蓝 盒 
子 原来 显示 的 位 置 已 经 被 删除 显示 ， 同 时 被 昔 换 元 素 hl 也 被 删除 。 














var ok = document.getElementById("ok"): /获取 按钮 元 素 的 引用 
ok.onclick = functionO{ // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函 数 
Var red = document.getElementById("red"): // 获 取 红 盒子 的 引用 


| var blue = document.getElementById("blue"): /获取 蓝 盒子 的 引用 
| var hl = document.getElementsByTagName("h1")[0]:// 获 取 一 级 标题 的 引用 
| red.replaceChild(blue.h1): // 把 红 盒 子 中 包含 的 一 级 标题 替换 为 蓝 盒子 
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【示例 3】replaceChild(0 方 法 能 够 返回 被 蔡 换 掉 的 节点 引用 ， 因 此 还 可 以 把 被 蔡 换 掉 的 元 素 给 找 | 
回来 ， 并 增加 到 文档 的 指定 节点 中 。 针 对 上 面 示例 ， 使 用 一 个 变量 del hl 存储 被 蔡 换 掉 的 一 级 标题 ， | 
然后 再 把 它 插入 到 红色 盒子 前 面 。 | 


var ok = document.getElementById("ok"): /获取 按钮 元 素 的 引用 

ok.onclick = functionO{ // 为 按钮 注册 一 个 鼠标 单 击 事件 处 理 函 数 
var red = document.getElementById("red"); // 获 取 红 盒子 的 引用 
var blue = document.getElementById("blue"): // 获 取 蓝 盒子 的 引用 
var hl = document.getElementsByTagName("h1")[0]:// 获 取 一 级 标题 的 引用 
var del hl = red.replaceChild(blue.h1): /把 红 盒子 中 包含 的 一 级 标题 蔡 换 为 蓝 盒子 
red parentNode insertBefore(del hl.red); // 把 替换 掉 的 一 级 标题 插入 到 红 盒子 前 面 


} 


18.3.7 ”获取 焦点 元 素 


HTMLS5 新 增 DOM 焦点 管理 功能 。 使 用 document.activeElement 属性 可 以 引用 DOM 中 当前 获得 

了 焦点 的 元 素 。 元 素 获取 焦点 的 方式 包括 页 面 加 载 、 用 户 输入 (如 按 Tab 键 ) 和 在 脚本 中 调用 focus0 | | 

方法 。 | 

【示例 1】 下 面 示例 设计 当 文 本 框 获取 焦点 时 ， 使 用 document.activeElement 设置 焦点 元 素 的 背 
景色 高 亮 显示 。 

<input type="text" > 

<input type="text" > 

<input type="text" > | 

<script> | 

| 

1 





var inputs = document.getElementsByTagName("input"): 
for(var i=0; i<inputs.length:i++){ 
inputs[i].onfocus =function(e){ 
document.activeElement.style.backeroundColor = "yellow": 
} | 
inputs[i].onblur =function(e){ | 
this.style.backgroundColor = "#fff' | 
} 
3 
</script> 
在 默认 情况 下 ， 文 档 刚 刚 加 载 完成 时 ，document.activeElement 引用 的 是 document.body 元 素 。 文 
档 加 载 期 间 ，document.activeElement 的 值 为 null。 


【示例 2】 使 用 HTMLS5 新 增 的 document.hasFocus0 方 法 可 以 判断 当前 文档 是 否 获得 了 焦点 。 
<input type="text" id="text" /> 
<script> | 
document.getElementById("text").focus(): | 
if(document.hasFocus()){ | 

document activeElement.style.backgroundColor = "yellow": 

} 
</script> 
通过 检测 文档 是 否 获 得 了 焦点 ， 可 以 知道 用 户 是 不 是 正在 与 页 面 交 互 。 
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18.4 使 用 文 本 


二 | 文本 节点 由 Text 类 型 表示 , 包含 纯 文本 内 容 , 或 转 义 后 的 HTML 字符 , 但 不 能 包含 HTML 代码 。 
Text 节点 具有 以 下 特征 : 
| nodeType 值 为 3。 
| 回 nodeName 值 为 "#text"。 
回 nodeValue 值 为 节点 所 包含 的 文本 。 
回 parentNode 是 一 个 Element 类 型 节点 。 
加 不 包含 子 节点 。 


18.4.1 访问 文本 


视频 讲解 | 使 用 文本 节点 的 nodeValue 属性 或 data 属性 可 以 访问 Text 节点 中 包含 的 文本 , 这 两 个 属性 中 包含 
| 的 值 相同 。 修 改 nodeValue 值 也 会 通过 data 反映 出 来 ， 反 之 亦 然 。 
| 每 个 文本 节点 还 包含 length 属性 , 使 用 它 可 以 返回 包含 文本 的 长 度 , 利用 该 属性 可 以 遍历 文本 节 
点 中 的 每 个 字符 。 
| 【示例 1】 下 面 示例 获取 div 元 素 中 的 文本 ， 比 较 直 接 的 方式 是 用 元 素 的 innerText 属性 读 取 。 
| <div id="div1">div 元 素 </div> 
| <script> 
| Var div = document.getElementById("div1"); 
Var text = div.innerText; 
alert(text); 
| </script> 
| 但 是 innerText 属性 不 是 标准 用 法 ， 需 要 考虑 浏览 器 兼容 性 ， 标 准 用 法 如 下 : 
| var text = div.firstChild.nodeValue: 
【示例 2】 下 面 设计 一 个 读 取 元 素 包 含 文本 的 通用 方法 。 
// 获 取 指 定 元 素 包含 的 文本 
// 参 数 : e 表示 指定 元 素 
/返回 值 : 返回 包含 的 所 有 文本 ， 包 括 子 元 素 中 包含 的 文本 





function text(e){ 
Var s=""; 
| var e=e.childNodes || e: // 判 断 元 素 是 否 包含 子 节点 
| for( var i= 0:; i< elength: i++){ /遍历 所 有 子 节点 
| s+= eli].nodeType != 1 ? elil.nodeValue : text(e[i].childNodes): 
| // 通 过 递归 遍历 所 有 元 素 的 子 节点 
} 
Teturmn s: 
} 


| 
在 上 面 函 数 中 ,通过 递归 函数 检索 指定 元 素 的 所 有 子 节点 ,然后 判断 每 个 子 节点 的 类 型 ,如果 不 
| 是 元 素 ， 则 读 取 该 节点 的 值 ， 否 则 再 递归 遍历 该 元 素 包含 的 所 有 子 节点 。 


并 
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18.4.2 ”创建 文本 


使 用 document 对 象 的 createTextNode0 方 法 可 创建 文本 节点 。 用 法 如 下 : 
document.createTextNode(data) 


参数 data 表示 字符 串 。 
【示例 】 下 面 示例 创建 一 个 新 div 元 素 ， 并 为 它 设置 class 值 为 red， 然 后 再 创建 一 个 文本 节点 ， 

并 将 其 添加 到 div 元 素 中 , 最 后 将 div 元 素 添 加 到 文档 body 元 素 中 , 这 样 就 可 以 在 浏览 器 中 看 到 新 创 
建 的 元 素 和 文本 节点 。 

Var element = document.createElement("div"); 

element.className = "red"; 

var textNode = document.createTextNode("Hello world!"): 

element.appendChild(textNode): 

document.body.appendChild(element): 


18.4.3 ”编辑 文本 


使 用 下 列 方法 可 以 操作 文本 节点 中 的 文本 。 

appendData(string): 将 字符 串 string 追加 到 文本 节点 的 尾部 。 

加 ”deleteData(start,length): 从 start 下 标 位 置 开 始 删除 length 个 字符 。 

回 insertData(startstring): 在 start 下 标 位 置 插入 字符 串 string。 

回 ”replaceData(startlength,string): 使 用 字符 串 string 蔡 换 从 start 下 标 位 置 开始 的 length 个 字符 。 
回 ”splitText(offseb: 在 offset 下 标 位 置 把 一 个 Text 节点 分 割 成 两 个 节点 。 

回 ”substringData(startlength): 从 start 下 标 位 置 开 始 提取 length 个 字符 。 


4 注意; 在 里 认 情况 下 ， 每 个 可 以 包含 内 容 的 元 素 最 多 只 能 有 一 个 文本 节点 ， 而 且 必须 确实 有 内 容 ， 
存在 。 在 开始 标 答 与 结束 标签 之 间 只 要 存在 空 陈 ， 就 会 创建 文本 节点 ， 


<!-- 下 面 div 不 包含 文本 节点 -> 

<div></div> 

<!-- 下 面 div 包含 文本 节点 ， 值 为 空格 --> 

<div> </div> 

<!-- 下 面 div 包含 文本 节点 ， 值 为 换行 符 --> 

<div> 

<div> 

<!-- 下 面 div 包含 文本 节点 ， 值 为 " Hello World!" --> 
<div>Hello World!</div> 








办 





18.4.4” 读 取 HTML 字符 串 


元 素 的 innerHTML 属性 可 以 返回 调用 元 素 包 含 的 所 有 子 节点 对 应 的 HIML 标记 字符 串 。 
innerHTML 属性 开始 是 正 私有 属性 ，HTML5 规范 了 innerHTML， 并 得 到 所 有 浏览 器 的 支持 。 
【示例 】 下 面 示例 使 用 innerHTML 属性 读 取 div 元 素 包 含 的 HIML 字符 串 。 
<divid="div1"> 
<style type="text/css">p { color:red:}</style> 
"409 。 








| 
| 
| 
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<p><span>div</span> 元 素 </p> 
</div> 
<script> 
var div = document.getElementById("div1"): 
var s = div.innerHTML; 
alert(s); 
</scrip> 
针对 上 面 示例 ，Mozilla 浏览 器 返回 的 字符 串 为 "<p><span>div</span> 元 素 </p>"， 而 正 浏览 器 
| 返回 的 字符 串 为 " <STYLE type =text /css >p { color :red ;}</STYLE > <P>< SPAN> div</ SPAN> 元 素 
| </P>"。 


| 18.4.5 插入 HTML 字符 串 


innerHTML 属性 可 以 根据 传 入 的 HTML 字符 串 , 创建 新 的 DOM 片段 , 然后 用 这 个 DOM 片段 完 
全 蔡 换 调用 元 素 原 有 的 所 有 子 节点 。 设 置 innerHTML 属性 值 之 后 ， 可 以 像 访问 文档 中 的 其 他 节点 一 
样 访 问 新 创建 的 节点 。 
【示例 】 下 面 示例 将 创建 一 个 1000 行 的 表格 。 先 构造 一 个 HTML 字符 串 ， 然 后 更 新 DOM 的 
innerHTML 属性 。 
<script> 
function tableInnerHTMLO { 
var i, h= [<table border="1" width="100%">"]: 
h.push('<thead>"): 
h.push('<tr><th>id<Vth><th>yes?<Vth><th>name<Vth><th>url<Vth><th>action<Vth><Vtr>"); 
h.push('‘<Vthead>"): 
h.push('<tbody>"); 
for(i=1;i<= 1000;i++) { 
| h.push('<tr><td>"):; 
| h.push(i): 
| h.push('<Vtd><td>"): 
h.push('And the answer is... '+ (1% 2 ? 'yes' : no): 
h.push('‘<Vtd><td>"): 
h.push(my name is # +): 
| h.push('‘<Vtd><td>"): 
| h.push('<a hre 人 ="http://example.org/ +i+".html">http://example.org/" + i+".html<Va>"): 
| h.push(<Vtd><td>): 
h.push(<ul>): 
h.push(' <li><a hre 全 "editphp?id=' + i+ ">edit<Va><VI>"); 
h.push(' <li><a href="delete.php?id=" + i+ '-id001">delete<Va><VIi>"); 
| hrpushC<Vul>"); 
| h.push('<Vtd>"): 
| push(C<Vtr>): 








} 

hpush(C<Vtbody>): 

hpush(<Vtable>"): 
document.getElementById(here").innerHTML = h.join("): 
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<scrip> | 
tableInnerHTMLO: 
</scrip> 
如 果 通 过 DOM 的 document.createElement0 和 document.createTextNode() 方 法 创建 同样 的 表格 , 代 | 给 

码 会 非常 元 长 。 在 一 个 性 能 苛刻 的 操作 中 更 新 一 大 块 HTML 页 面 ，innerHTML 在 大 多 数 浏览 器 中 执 | 


行 得 更 快 。 
18.5 使 用 属性 





属性 节点 由 Attr 类 型 表示 , 在 文档 树 中 被 称 为 元 素 的 特性 ， 习 惯 上 称 之 为 标签 的 属性 。 属 性 节点 | 
具有 下 列 特征 : | 
nodeType 值 为 11。 | 
nodeName 值 是 特性 的 名 称 。 | 
nodeValue 值 是 特性 的 值 。 
parentNode 值 为 null。 | 
在 HTML 中 不 包含 子 节点 。 | 
在 XML 中 子 节点 可 以 是 Text、EntityReference。 | 
尽管 属性 也 是 节点 ， 但 是 DOM 文档 树 中 不 能 够 直接 访问 ,， DOM 没有 提供 关系 指针 。 开 发 人 员 | 
常用 getAttribute0 、setAttribute0 和 removeAttribute0 等 方法 来 操作 属性 。 | 


18.5.1 访问 属性 
Attr 是 Element 的 属性 ， 作 为 一 种 节点 类 型 ， 它 继承 了 Node 类 型 的 属性 和 方法 。 不 过 At 没有 | 


回回 加 图 加 加 





| 频 讲解 
父 节点 ， 同 时 属性 也 不 被 认为 是 元 素 的 子 节点 ， 对 于 很 多 Node 的 属性 来 说 都 将 返回 null。 Hi 

Attr 对 象 包含 3 个 专用 属性 ， 简 单 说 明 如 下 : | 
回 name: 返回 属性 的 名 称 ， 与 nodeName 的 值 相同 。 | 
回 value: 设置 或 返回 属性 的 值 ， 与 nodeValue 的 值 相同 。 | 
回 ” specified: 如 果 属 性 值 是 在 代码 中 设置 的 ， 则 返回 tmue; 如 果 为 默认 值 ， 则 返回 false。 
创建 属性 节点 的 方法 : 
document.createAttribute(name) 


参数 name 表示 新 创建 的 属性 的 名 称 。 
【示例 1】 下 面 示例 创建 一 个 属性 节点 ， 名 称 为 align， 值 为 center， 然 后 为 标签 <div id="box"> 

设置 属性 align， 最 后 分 别 使 用 3 种 方法 读 取 属性 align 的 值 。 

<div id="box">document.createAttribute(name)</div> 

<script> 

Var element = document.getElementById("box"): 

var attr = document.createAttribute("align"): 

attr.value = "center": 














element.setAttributeNode(attr): 
alert(element.attributes["align"].value): /center" 
alert(element.getAttributeNode("align").value): /Mcenter" 
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| alert(element.getAttribute("align")): /center" 
| </script> 
| 
| 为 了 将 新 创建 的 属性 添加 到 元 素 中 ， 必 须 使 用 元 素 的 setAttributeNode( 方 法 。 添 加 属性 之 后 ， 可 

| 以 通过 下 列 任 何方 式 访问 该 属性 : attributes 属性 、getAttributeNode0 方 法 、getAttribute0 方 法 。 

me 其 中 ，attributes 属性 、getAttributeNode() 方 法 都 会 返回 对 应 属性 的 Attr 节点 ， 而 getAttribute() 方 

法 直接 返回 属性 的 值 。 不 建议 使 用 attributes[] 数 组 方式 来 读 取 某 个 位 置 上 的 属性 节点 ， 因 为 不 同 浏览 

| 器 对 其 支持 存在 差异 。 

疱 提示 : 属性 节点 一 般 位 于 元 素 的 头 部 标签 中 。 元 素 的 属性 列表 会 随 着 元 素 信息 预先 加 载 ， 并 被 存 

储 在 关联 数组 中 。 例如， 针对 下 面 HTML 结构 。 

<div id="div1" class="stylel" lang="en" title="div"></div> 

当 DOM 加 载 后， 表示 HTML div 元 素 的 变量 divElement 就 会 自动 生成 一 个 关联 集合 ， 它 
以 名 值 对 形式 检索 这 些 属性 。 


divElement.attributes = { 
id: "div1", 
class : "stylel"、 
lang : "en", 
title : "div" 





有 
在 传统 DOM 中 ， 常 用 点 语法 通过 元 素 直接 访问 HTML 属性 ， 如 img.src、a.href 等 ， 这 种 
方式 虽然 不 标准 ， 但 是 获得 了 所 有 浏览 器 支持 。 
【示例 2】img 元 素 拥有 src 属性 ， 所 有 图 像 对 象 都 拥有 一 个 src 脚本 属性 ， 它 与 HTML 的 sre 特 
| 性 关联 在 一 起 。 下 面 两 种 用 法 都 可 以 很 好 地 工作 在 不 同 浏览 器 中 。 
| <img id="img1" src=w 户 





| <script> 

| Var img = document.getElementById("img1"); 

| imgsetAttribute("sre","http:// www.w3.org/"): //HTML 属性 
img.src = "http://www.w3.org/": //JavaScript 属性 
</scrip> 


| 类 似 的 属性 还 有 onclick、style 和 href 等 。 为 了 保证 JavaScript 脚本 在 不 同 浏览 器 中 都 能 很 好 地 工 
| 作 ， 建 议 采 用 标准 用 法 会 更 为 稳 受 ， 而 且 很 多 HIML 属性 并 没有 被 JavaScript 映射 ， 所 以 也 就 无 法 直 
| 接 通过 脚本 属性 进行 读 写 。 

18.5.2 ” 读 取 属性 


使 用 元 素 的 getAttribute0 方 法 可 以 快速 读 取 指定 元 素 的 属性 值 ， 传 递 的 参数 是 一 个 以 字符 串 形式 
表示 的 元 素 属性 名 称 ， 返 回 一 个 字符 串 类 型 的 值 ， 如 果 给 定 属 性 不 存在 ， 则 返回 值 为 null。 
【示例 1】 下 面 示例 访问 红色 盒子 和 蓝 色 盒子 ， 然 后 读 取 这 些 元 素 所 包含 的 id 属性 值 。 
<div id-"red"> 红 盒子 </div> 








| <div id-"blue"> 蓝 盒子 </div> 

| <script> 

| var red = document.getElementById("red"): ”// 获 取 红色 盒子 

| alert(red.getAttribute("id")): // 显 示 红色 盒子 的 记 属 性 值 


var blue = document.getElementById("blue"): // 获 取 蓝 色 盒 子 
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alert(blue.getAttribute("id")): // 显 示 蓝 色 盒子 的 i 属性 值 
</scrip> | 
| 

【示例 2】 除 了 使 用 元 素 的 方法 读 取 属 性 值 外 ，HTML DOM 还 支持 使 用 点 语法 快捷 读 取 属性 值 。 
var red = document.getElementById("red"): | 
alert(red id): 全 
Var blue = document.getElementById("blue"): 
ea 


使 用 点 方法 比较 简便 ， 也 可 获得 所 有 浏览 器 的 支持 。 | 


< 负 注意 : 对 于 class 属性 ， 则 必须 使 用 className 属性 名 ， 因 为 class 是 JavaSeript 语言 的 保留 字 ; 
对 于 for 属性 ， 则 必须 使 用 htmlFor 属性 名 ， 这 与 CSS 脚本 中 float 和 text 属性 被 改名 为 
cssFloat 和 cssText 是 一 个 道理 。 


【示例 3】 使 用 className 读 写 样式 类 。 


<label id="labell" class="class1" for="textfield"> 文 本 框 : 
<input type="text" name="textfield" id="textfield" /> | 

</label> | 

<script> | 

var label = document.getElementById("labell | 

alert(label.className): 

alert(label.htmlFor): 

</script> 


【示例 4】 对 于 复合 类 样式 ， 需 要 使 用 split0 方 法 劈 开 返回 的 字符 串 ， 然 后 遍历 读 取 类 样式 。 | 
| 
| 


<div id="red" class="red blue"> 红 盒子 </div> 

<script> 

/所 有 类 名 生成 的 数组 

Var classNameArray = document.getElementById("red").className.split(" "): 

for(var iin classNameArray ){ 。 /遍历 数组 | 

alert(classNameArray[i]): /当前 class 名 | 
| 


} 
</scrip> 


18.5.3 ”设置 属性 


使 用 元 素 的 setAttribute0 方 法 可 以 设置 元 素 的 属性 值 ， 用 法 如 下 : 
setAttribute(name,value) 


参数 name 和 value 分 别 表示 属性 名 称 和 属性 值 。 属性 名 和 属性 值 必 须 以 字符 串 的 形式 进行 传递 。 
如 果 元 素 中 存在 指定 的 属性 ， 它 的 值 将 被 刷新 ， 如 果 不 存 在 ， 则 setAttribute() 方 法 将 为 元 素 创建 该 属 | 
性 并 赋值 。 | 

【示例 】 下 面 示 例 分 别 为 页 面 中 的 div 元 素 设置 title 属性 。 

<div id="red"> 红 盒子 </div> 

<div id="blue"> 蓝 盒子 </div> 

<script> 

var red = document.getElementById("red"): // 获 取 红 盒子 的 引用 
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var blue = document.getElementById("blue"): // 获 取 蓝 盒子 的 引用 


red.setAttribute("title", "这 是 红 盒子 "): /为 红 盒 子 对 象 设置 title 属性 和 值 
blue.setAttribute("title", "这 是 蓝 盒子 ): /为 蓝 盒 子 对 象 设置 title 属性 和 值 
</scrip> 





【拓展 】 
可 以 通过 快捷 方法 设置 HTML DOM 文档 中 元 素 的 属性 值 ， 具 体 说 明 可 以 扫 码 阅读 。 


线 上 阅读 


18.5.4 ”删除 属性 


使 用 元 素 的 removeAttribute0 方 法 可 以 删除 指定 的 属性 。 用 法 如 下 : 

removeAttribute(name) 

参数 name 表示 元 素 的 属性 名 。 

| 【示例 】 在 下 面 示例 中 设计 了 两 个 按钮 ， 并 分 别 绑 定 不 同 的 事件 处 理 函 数 。 单 击 “ 删 除 ”按钮 即 
| 可 调用 表格 的 removeAttribute() 方 法 清除 表格 边框 ， 单 击 “ 恢 复 ”按钮 即 可 调用 表格 的 setAttributeO 








| 方法 重新 设置 表格 边框 的 粗细 。 
| <script> 
window.onload = function| { // 绑 定 页 面 加 载 完毕 时 的 事件 处 理 函 数 
var table = document.getElementsByTagName("table")[0]: // 获 取 表 格外 框 的 引用 
| Var del = document.getElementById("del"): // 获 取 删 除 按钮 的 引用 
| Var reset = document.getElementById("reset"); /获取 恢复 按钮 的 引用 
| del.onclick = functionO{ /为 删除 按钮 绑 定 事件 处 理 函数 
table.removeAttribute("border"): // 移 出 边框 属性 
由 
reset.onclick = functionO{ /为 恢复 按钮 绑 定 事件 处 理 函数 
| table setAttributeC'border' "2"); // 设 置 表格 的 边框 属性 
| WW 
| </scripf> 
<table width="100%" border="2"> 
<tr> 
| <td> 数 据 表格 </td> 
| </tr> 
| </table> 


<button id="del"> 删 除 </button><button id="reset"> 恢 复 </button> 





| HTML5 为 document 对 象 和 HIML 元 素 新 增 了 getElementsByClassName0 方 法 , 使 用 该 方法 可 以 
| 选择 指定 类 名 的 元 素 。getElementsByClassName() 方 法 可 以 接收 一 个 字符 串 参数 ， 包 含 一 个 或 多 个 类 
| 名 ， 类 名 通过 空格 分 隔 ， 不 分 先后 顺序 ， 方 法 返回 带 有 指定 类 的 所 有 元 素 的 NodeList。 

| 浏览 器 支持 状态 : IE 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。 

| 如果 不 考虑 兼容 早期 下 浏览 器 或 者 怪异 模式 ， 用 户 可 以 放心 使 用 。 

| 【示例 】 下 面 示例 使 用 document.getElementsByClassName("red") 方 法 选择 文档 中 所 有 包含 red 类 
| 的 元 素 。 
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<div class="red"> 红 盒子 </div> 

<div class="blue red"> 蓝 盒子 </div> 

<div class="green red"> 绿 盒子 </div> 

<script> 

Var divs = document.getElementsByClassName("red"): 

for(var i=0; i<divs.length:i++){ 
console.log(divs[i].innerHTML): 

} 

</script> 


18.6 使 用 CSS 选择 器 





Selectors API 是 由 W3C 发 起 制定 的 一 个 标准 ， 致 力 于 让 浏览 器 原生 支持 CSS 查询 。 DOM API | 
核心 模块 包括 querySelector0 和 querySelectorAll0， 这 两 个 方法 能 够 根据 CSS 选择 器 规范 ， 便 捷 定 | 
位 文档 中 的 指定 元 素 。 | 

浏览 器 支持 状态 : IE 8+、Firefox、Chrome、Safari、Opera。 

Document、DocumentFragment、Element 都 实现 了 NodeSelector 接口 ， 即 这 3 种 类 型 的 节点 都 拥 
有 querySelector() 和 querySelectorAll() 方法 。 | 

querySelector() 和 querySelectorAll() 方法 的 参数 必须 是 符合 CSS 选择 器 规范 的 字符 串 ， 不 同 的 
是 ，querySelector( 方 法 返回 的 是 一 个 元 素 对 象 ，querySelectorAll0 方法 返回 的 是 一 个 元 素 集合 。 

【示例 1】 新 建 网 页 文档 ， 输 入 下 面 HTML 结构 代码 。 


<div class="content"> 


<li> 首 页 </li> 
<li class="red"> 财 经 </li> 
<li class="blue"> 娱 乐 </l 放 | 
<liclass="red"> 时 尚 </li> | 
<li class="blue"> 互 联网 </li> | 
</ul> 
</div> 
如 果 要 获得 第 一 个 下 元 素 ， 可 以 使 用 如 下 方法 : 
document.querySelector(".content ul 1i"):; 
如 果 要 获得 所 有 二 元 素 ， 可 以 使 用 如 下 方法 : 
document.querySelectorAll(".content ul 11"): | 
| 
如 果 要 获得 所 有 class 为 red 的 芷 元 素 ， 可 以 使 用 如 下 方法 : | 
document.querySelectorAll("lired"): | 
次 提示 : DOM API 模 块 也 包含 getElementsByClassName0 方 法 ,使 用 该 方法 可 以 获取 指定 类 名 的 元 
素 。 例 如 : 
document.getElementsByClassName("red"): 
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”< 所 注意 : getElementsByClassName() 方 法 只 能 够 接收 字符 囊 ， 且 为 类 名 ， 而 不 需要 加 点 号 前 级 ， 如 


果 没 有 匹配 到 任何 元 素 则 返回 空 数组 。 


CSS 选择 器 是 一 个 便捷 的 确定 元 素 的 方法 ， 这 是 因为 大 家 已 经 对 CSS 很 熟悉 了 。 当 需要 联合 查 
询 时 ， 使 用 querySelectorAll0 更 加 便利 。 
【示例 2】 在 文档 中 ， 一 些 li 元素 的 class 名 称 是 red， 另 一 些 class 名 称 是 blue， 可 以 用 
query SelectorAll0 方 法 一 次 性 获得 这 两 类 节点 。 


Var lis =document.querySelectorAll("li.red, li.blue"): 


如 果 不 使 用 querySelectorAll0 方 法 ， 那 么 要 获得 同样 列表 ， 需 要 更 多 工作 。 一 个 办 法 是 选择 所 有 
的 下 元 素 ， 然 后 通过 迁 代 操作 过 滤 出 那些 不 需要 的 列表 项 目 。 
var result = [], lisl = document.getElementsByTagName('li"). classname ="; 
for(var i=0, len =1isl.length; i< len:; i++) { 
classname = lisl[i].className: 
这 classname 一 一 'red' || classname 一 一 blue) { 
Tesult.push(lis1[i]): 
} 
} 
比较 上 面 两 种 不 同 的 用 法 ， 使 用 选择 器 querySelectorAll0 方 法 比 使 用 getElementsByTagName() 的 
性 能 要 快 很 多 。 因 此 ， 如 果 浏览 器 支持 document.querySelectorAll0， 那 么 最 好 使 用 它 。 
在 Selectors API 2 版 本 规范 中 ， 为 Element 类 型 新 增 了 一 个 方法 一 matchesSelector()。 这 个 方法 
接收 一 个 参数 ， 即 CSS 选择 符 ， 如 果 调用 元 素 与 该 选择 符 匹 配 ， 返 回 true; 否则 ， 返 回 false。 目 前 ， 
浏览 器 对 该 方法 支持 不 是 很 好 。 


18.7 扫 码 拓展 阅读 


| 本 节 为 线 上 拓展 内 容 ， 介 绍 jQuery 库 的 使 用 ， 很 多 用 户 在 学 习 DOM 时 ， 发 现 使 用 jQuery 操作 
| DOM 会 更 方便 和 灵活 ， 如 果 你 不 了 解 jQuery， 同 时 有 兴趣 和 精力 想 进一步 探索 ， 请 扫 码 深度 阅读 
jQuery。 本 节 提 供 内 容 比 较 简单 , 适合 入 门 同学 , 同时 本 书后 面部 分 章节 会 用 到 jQuery 进行 JavaScript 
脚本 编写 ， 也 需要 读者 有 一 定 的 jQuery 基础 。 

回 ; 回 





18.8 在 线 练 习 


练习 文档 对 象 模型 开发 的 一 般 方 法 ,培养 初学 者 灵活 使 用 JavaScript 设 计 动态 网 页 效果 的 基本 能 力 。 
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操作 事件 


事件 是 JavaScript 最 鲜明 的 将 性 ，JavaScript 以 事件 驱动 实现 页 面 交互 ， 当 事件 发 生 时 ， 浏 
览 器 会 自动 调用 事件 处 理 函 数 ， 同 时 生成 事件 对 象 ， 传 逐 给 事件 处 理 函数 


【 学 习 要 点 】 

站 了解 事件 模型 、 事 件 流 、 事 件 类 型 
WI 能 金正 确 注 册 事 件 、 销 毁 事 件 
WI 能 金 自 定义 事件 


5 as 


19.1 事件 基础 


JavaScript 事件 最 早出 现在 IE 3.0 和 Netscape 2.0 浏览 器 中 ，DOM 2 规范 标准 化 JavaScript 事件 ， 
2004 年 W3C 发 布 DOM 3 规范 ， 进 一 步 完 善 JavaScript 事件 模型 。 

下 9+、Firefox、Opera、Safari 和 Chrome 主流 浏览 器 都 支持 DOM 2 事件 模块 的 核心 部 分 。IE 8 
| 及 其 早期 版 本 不 支持 标准 事件 模型 ， 仅 支持 正 事件 模型 。 


19.1.1 事件 模型 


| 

| 在 浏览 器 发 展 历史 中 ， 出 现 了 以 下 4 种 事件 处 理 模型。 

| 回 “原始 事件 模型 ， 在 浏览 器 初期 出 现 的 一 种 简单 事件 模型 ， 也 称 为 DOM 0 事件 模型 。 主 要 通 
过 事件 属性 ， 为 标签 绑 定 事件 处 理 函 数 。 由 于 这 种 模型 应 用 比较 广泛 ， 获 得 了 所 有 浏览 器 的 

支持 ， 目 前 依然 比较 流行 。 但 是 这 种 模型 对 于 HTML 文档 标签 依赖 严重 ， 不 利于 JavaSeript 

| 独立 开发 。 

| 回 ”DOM 事件 模型 ， 由 W3C 制定 ， 是 目前 标准 的 事件 处 理 模型 。 所 有 符合 标准 的 浏览 器 都 支 

持 该 模型 ，IE 怪异 模式 不 支持 。DOM 事件 模型 包括 DOM 2 事件 模块 和 DOM 3 事件 模块 ， 

DOM 3 事件 模块 为 DOM 2 事件 模块 的 升级 版 ， 略 有 完善 ， 主 要 是 新 增 了 一 些 事情 类 型 ， 以 

| 

| 

| 

| 


l 


适应 移动 设备 的 开发 需要 ， 但 大 部 分 规范 和 用 法 保持 一 致 。 
回 ”正事 件 模型 :下 4.0 及 其 以 上 版 本 浏览 器 支持 ， 与 DOM 事件 模型 相似 ， 用 法 不 同 。 
Netscape 事件 模型 : 由 Netscape 4 浏览 器 实现 ， 在 Netscape 6 中 停止 支持 。 


19.1.2 事件 流 


事件 流 是 多 个 节点 对 同一 种 事件 进行 响应 的 先后 顺序 ， 主 要 包括 3 种 类 型 。 
1. 冒 泡 弄 
| 事件 从 最 特定 的 目标 向 最 不 特定 的 目标 document 对 象 ) 触发， 也 就 是 事件 从 下 向 上 进行 响应 
”这 个 传递 过 程 被 形象 地 称 为 冒 泡 。 
| 2. 捕获 型 
| 事件 从 最 不 特定 的 目标 (document 对 象 ) 开始 触发 ， 然 后 到 最 特定 的 目标 ， 也 就 是 事件 从 上 向 
| 下 进行 响应 。 
3. 混合 型 
| W3C 的 DOM 事件 模型 支持 捕获 型 和 冒 泡 型 两 种 事件 流 ， 但 是 捕获 型 事件 流 先 发 生 ， 然 后 才 发 
” 生 冒 泡 型 事件 流 。 两 种 事件 流 会 触及 DOM 中 的 所 有 层级 对 象 ， 从 document 对 象 开始 ， 最 后 返回 
| document 对 象 结束 。 

根据 事件 流 类 型 ， 可 以 把 事件 传播 的 整个 过 程 分 为 3 个 阶段 。 
| 加 ”捕获 阶段 : 事件 从 document 对 象 沿 着 文档 树 向 下 传播 到 目标 节点 ， 如 果 目 标 节点 的 任何 一 
| 个 上 级 节点 注册 了 相同 事件 , 那么 事件 在 传播 的 过 程 中 就 会 首先 在 最 接近 项 部 的 上 级 节点 执 
| 行 ， 依 次 向 下 传播 。 


四 
请 
二 
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目标 阶段 : 注册 在 目标 节点 上 的 事件 被 执行 。 

回 ” 冒 泡 阶段 : 事件 从 目标 节点 向 上 触发 ， 如 果 上 级 节点 注册 了 相同 的 事件 ， 
将 会 逐 级 响应 ， 依 次 向 上 传播 。 

【拓展 】 

如 果 想 具体 感知 不 同事 件 流 的 发 生 过 程 ， 读 者 可 以 扫 码 阅读 。 


19.1.3 ”事件 类 型 





根据 触发 对 象 不 同 ， 可 以 将 浏览 器 中 发 生 的 事件 分 成 不 同 的 类 型 。DOM 3 事件 模块 在 DOM 2 事 | 
件 模块 的 基础 上 重新 定义 事件 类 型 ， 添 加 了 一 些 新 事件 。DOM 3 事件 类 型 简单 说 明 如 下 。 
UI (User Interface， 用 户 界面 ) 事件 : 当 用 户 与 页 面 上 的 元 素 交 互 时 触发 。 
焦点 事件 : 当 元 素 获 得 或 失去 焦点 时 触发 。 
鼠标 事件 ， 当 用 户 通 过 鼠标 在 页 面 上 执行 操作 时 触发 。 
滚轮 事件 : 当 使 用 鼠标 滚轮 或 类 似 设备 时 触发 。 
文本 事件 ， 当 在 文档 中 输入 文本 时 触发 。 
键盘 事件 ， 当 用 户 通 过 键盘 在 页 面 上 执行 操作 时 触发 。 
合成 事件 ， 当 为 IME (Input Method Editors， 输 入 法 编辑 器 ) 输入 字符 时 触发 。 
变动 事件 ， 当 底层 DOM 结构 发 生变 化 时 触发 。 
变动 名 称 事件 ， 当 元 素 或 属性 名 变动 时 触发 。 此 类 事件 已 经 被 废弃 。 


容 提示 : HTML5 也 定义 了 一 组 事件 ， 各 浏览 器 还 会 在 DOM 和 BOM 中 实现 其 他 专 有 事件 。 这 些 
专 有 的 事件 一 般 都 是 根据 开发 人 员 需 求 定制 的 ， 没 有 规范 ， 也 没有 获得 广泛 支持 。 


【拓展 】 
如 果 想 具体 了 解 DOM 2 事件 模块 组 成 和 类 型 ， 读 者 可 以 扫 码 阅读 。 


19.1.4 绑 定 事件 


在 原始 事件 模型 中 ，JavaScript 支持 两 种 绑 定 方式 。 
回 ”静态 绑 定 
把 JavaScript 脚本 作为 属性 值 ， 直 接 赋 给 事件 属性 。 
【示例 1】 在 下 面 示例 中 ， 把 JavaScript 脚本 以 字符 串 的 形式 传递 给 onclick 属性 ， 为 <button> 标 
签 绑 定 click 事件 。 当 单 击 按钮 时 就 会 触发 click 事件 ， 执 行 这 行 JavaScript 脚本 。 
<button onclick="alert( 你 单 击 了 一 次 ! );"> 按 钮 </button> 
加 ”动态 绑 定 
使 用 DOM 对 象 的 事件 属性 进行 赋值 。 | 
【示例 2】 在 下 面 示例 中 ， 使 用 document.getElementById0 方 法 获取 button 元 素 ， 然 后 把 一 个 匿 
名 函数 作为 值 传递 给 button 元 素 的 onclick 属性 ， 实 现 事 件 绑 定 操作 。 | 
<button id="btn"> 按 钮 </button> 
<script> 
var button = document.getElementById("btn"): 
button.onclick= ionO{ 
alert(" 你 单 击 了 一 次 ! "); 


因 因 回回 因 因 四 加 四 、 
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这 种 方法 可 以 在 脚本 中 直接 为 页 面 元 素 附加 事件 ， 不 用 破坏 HTML 结构 ， 比 上 一 种 方式 灵活 。 
| 19.1.5 “定义 事件 处 理 函 数 
事件 处 理 函 数 是 一 类 特殊 的 函数 ， 主 要 目的 是 实现 事件 处 理 ， 由 事件 触发 进行 调用 ， 一 般 没 有 明 





| 确 的 返回 值 。 
| 不 过 用 户 可 以 利用 事件 处 理 函数 的 返回 值 影 响 事件 程序 的 执行 ， 如 单 击 超 链接 时 ,禁止 默认 的 跳 
| 转行 为 。 


| 【示例 1】 在 下 面 示例 中 ， 为 form 元 素 绑 定 onsubmit 事件 ， 设 计 当 文本 框 中 输入 值 为 空 时 ， 定 
| 义 事件 处 理 函 数 返回 值 为 false。 由 于 该 返回 值 为 false， 将 禁止 表单 提交 操作 。 
| <form id="form1" name="form1" method="post" action="http://www.mysite.cn/" onsubmit= 
"if(this.elements[0].value Jength=—0) retum false:"> 

姓名 : <input id="user" name="user" type="text" /> 
| <input type="submit" name="btn" id="btn" value=" 提 交 " /> 
| </form> 
在 上 面 代 码 中 , this 表示 当前 form 元 素 ,elements[0] 表 示 姓 名 文本 框 , 如 果 该 文本 框 的 value.length 
| 属性 值 长 度 为 0， 表 示 当前 文本 框 为 空 ， 则 返回 false， 禁 止 提交 表单 。 
| 事件 处 理 函 数 不 需 要 参数 。 在 DOM 事件 模型 中 , 事件 处 理 函 数 默 认 包 含 event 参数 对 象 ， event 
| 对 象 包含 事件 信息 ， 方 便 在 函数 体内 进行 访问 。 
| 【示例 2】 在 下 面 示例 中 ， 为 按钮 对 象 绑 定 一 个 单 击 事件 。 在 这 个 事件 处 理 函 数 中 ， 参 数 e 为 形 
| 参 , 响应 事件 之 后 , 浏览 器 会 把 event 对 象 传递 给 形 参 变量 e, 再 把 event 对 象 作为 一 个 实 参 进行 传递 ， 
| 
| 
| 
| 
| 
| 
| 
| 





| 读 取 event 对 象 包含 的 事件 信息 ， 在 事件 处 理 函 数 中 输出 当前 源 对 象 节点 名 称 ， 显 示 效 果 如 图 19.1 
所 示 。 

<button id="btn"> 按 。 钮 </button> 

<script> 

var button = document.getElementById("btn"): 

button.onclick = function(e){ 


var e =€ || window.event: /兼容 事件 模型 
document.write(e.srcElement ? e.srcElement : e.target); /兼容 event 属性 
} 
</script> 


加 Bremen 2 =c [| < = Smeatonn 2 -=o 


[object HTMLButtonElement] 





图 19.1 捕获 当前 事件 源 


| 
| i 
”会 提示 : 在 上 面 脚 本 中 ， 为 了 能 够 兼容 IE 事件 模型 和 DOM 事件 模型 ， 分 别 使 用 一 个 逻辑 运算 符 
| 和 一 个 条 件 运算 符 来 匹配 不 同 的 模型 。 
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正 事件 模型 和 DOM 事件 模型 对 于 event 对 象 的 处 理 方式 不 同 : IE 把 event 对 象 定义 为 
window 对 象 的 一 个 属性 , 而 DOM 事件 模型 把 event 定义 为 事件 处 理 函 数 的 默认 参数 。 所 
以 ， 在 处 理 event 参数 时 ， 应 该 判断 event 在 当前 解析 环境 中 的 状态 ， 如 果 当 前 浏览 器 支 | 
持 ， 则 使 用 event (DOM 事件 模型 ) 如果 不 支持 ， 则 说 明 当前 环境 是 但 浏览 器 ， 通 过 | 
window.event 获取 event 对 象 。 | 
event.srcElement 表示 当前 事件 的 源 ， 即 响应 事件 的 当前 对 象 ， 这 是 IE 模型 用 法 。 但 是 
DOM 事件 模型 不 支持 该 属性 ， 需 要 使 用 event 对 象 的 target 属性 ， 它 是 一 个 符合 标准 的 | 
源 属性 。 为 了 能 够 兼容 不 同 浏览 器 , 这 里 使 用 了 一 个 条 件 运 算 符 , 先 判断 event.srcElement 
属性 是 否 存在 ， 否 则 使 用 event.target 属性 来 获取 当前 事件 对 象 的 源 。 
在 事件 处 理 函 数 中 ，this 表示 当前 事件 对 象 ， 与 event 对 象 的 srcElement 属性 (IE 模型 ) 
或 者 target (DOM 事件 模型 ) 属性 所 代表 的 意思 相同 。 
【示例 3】 在 下 面 示例 中 ， 定 义 当 单 击 按钮 时 改变 当前 按钮 的 背景 色 为 红色 ， 其 中 this 关键 字 就 
表示 button 按钮 对 象 。 
<button id="btn" onclick="this.style.background='red':"> 按 。 钮 </button> | 
也 可 以 使 用 下 面 一 行 代码 来 表示 : 
<button id="btn" onclick="(event srcElement?event stcElement:event target) style. background=red';"> 按 钮 <button> | 
【示例 4】 在 一 些 特殊 环境 中 ，this 并 非 都 表示 当前 事件 对 象 。 在 下 面 示例 中 ， 分 别 使 用 this 和 | 
事件 源 来 指定 当前 对 象 ， 但 是 会 发 现 this 并 没有 指向 当前 的 事件 对 象 按钮 ， 而 是 指向 window 对 象 ， | 
所 以 这 个 时 候 继续 使 用 this 引用 当前 对 象 就 错 了 。 | 
| 








<script> 
function btn10{// 事 件 处 理 函 数 ， 函 数 中 的 this 表示 调用 该 函数 的 当前 对 象 
this.style.background = "red": 


} | 
function btn2(event){ /事件 处 理 函 数 | 
event = event || window.event: /获取 事件 对 象 event | 
var src = event.srcElement ? event.srcElement : eventtarget 。“”// 获 取 当 前 事件 源 | 
src.style.background = "red"; /改变 当前 事件 源 的 背景 色 
} 
</script> | 
1 


<button id="btn1" onclick="btn10:"> 按 钮 1</button> 
<button id="btn2" onclick="btn2(evenb:"> 按 钮 2</button> 


为 了 能 够 准确 获取 当前 事件 对 象 ， 在 第 二 个 按钮 的 click 事件 处 理 函数 中 ， 直 接 把 event 传递 给 | 
btn20。 如 果 不 传递 该 参数 ， 支 持 DOM 事件 模型 的 浏览 器 就 会 找 不 到 event 对 象 。 
19.1.6 ”注册 事件 

在 DOM 事件 模型 中 ， 通 过 调用 对 象 的 addEventListener0 方 法 注册 事件 ， 用 法 如 下 : 

element.addEventListener(String type. Function listener. boolean useCapture): 
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参数 说 明 如 下 : 
type: 注册 事件 的 类 型 名 。 事 件 类 型 与 事件 属性 不 同 ， 事 件 类 型 名 没有 on 前 级 。 例 如 ， 对 
于 事件 属性 onclick 来 说 ， 所 对 应 的 事件 类 型 为 click。 
全 站 | listener: 监听 函数 ， 即 事件 处 理 函数 。 在 指定 类 型 的 事件 发 生 时 将 调用 该 函数 。 在 调用 这 个 
| 函数 时 ， 默 认 传递 给 它 的 唯一 参数 是 event 对 象 。 
Jote | 回 useCapture: 是 一 个 布尔 值 。 如 果 为 true， 则 指定 的 事件 处 理 函 数 将 在 事件 传播 的 捕获 阶段 
| 触发 ， 如 果 为 false， 则 事件 处 理 函 数 将 在 冒 泡 阶段 触发 。 
| 【示例 1】 在 下 面 示例 中 ， 使 用 addEventListener0 方 法 为 所 有 按钮 注册 click 事件 。 首 先 ， 调 用 
| document 的 getElementsByTagName() 方 法 捕获 所 有 按钮 对 象 ， 然 后 ， 使 用 for in 语句 遍历 按钮 集 


(btn)， 并 使 用 addEventListener() 方 法 分 别 为 每 个 按钮 注册 一 个 事件 函数 ， 该 函数 获取 当前 对 象 
所 显示 的 文本 。 


<button id="btn1" onclick="btn10:"> 按 钮 1</button> 
<button id="btn2" onclick="btn2(evenb:"> 按 钮 2</button> 


<script> 
var btn = document.getElementsByTagName("button"); /捕获 所 有 按钮 
for(var iin btn){ // 遍 历 按钮 集合 
btn[i].addEventListener("click"., functionO{ 
alert(this innerHTML): 
} true): // 为 每 个 按钮 对 象 注册 一 个 事件 处 理 函 数 ， 定 义 在 捕获 阶段 进行 响应 
} 
</script> 


< Baber 
搜 要 1 || Be 


| 
| 
| 
| 
| 在 浏览 器 中 预览 ， 单 击 不 同 的 按钮 ， 则 会 自动 弹出 对 话 框 ， 显 示 按 钮 的 名 称 ， 如 图 19.2 所 示 。 
| 
| 
| 





图 19.2 ”响应 注册 事件 


| 
| 
”会 提示 : 早期 但 浏览 器 不 支持 addEventListener() 方 法 。 从 IE8 开始 才 完全 支持 DOM 事件 模型 。 
| 使 用 addEventListener() 方 法 能 够 为 多 个 对 象 注册 相同 的 事件 处 理 函 数 ， 也 可 以 为 同一 个 
| 对 象 注册 多 个 事件 处 理 函 数 。 为 同一 个 对 象 注册 多 个 事件 处 理 函 数 对 于 模块 化 开发 非常 
有 用 。 
| 【示例 2】 在 下 面 示例 中 ， 为 段落 文本 注册 两 个 事件 : mouseover 和 mouseout。 当 鼠标 移 到 段落 
| 文本 上 面 时 会 显示 为 蓝 色 背景 ， 而 当 鼠 标 移出 段落 文本 时 会 自动 显示 为 红色 背景 。 这 样 就 不 需要 破坏 
| 文档 结构 为 段落 文本 增加 多 个 事件 属性 。 
<p id="p1"> 为 对 象 注册 多 个 事件 </p> 
| <script> 

var p1 = document.getElementById("p1"): // 捕 获 段 落 元 素 的 句柄 
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pl.addEventListener("mouseover". functionO{ 

this.style.backeround = ‘blue'; 
}, true); // 为 段落 元 素 注册 第 一 个 事件 处 理 函 数 
pl.addEventListener("mouseout", functionO{ 

this.style.backeround = Ted': 
}, true); // 为 段落 元 素 注册 第 二 个 事件 处 理 函数 
</script> 
正 事件 模型 使 用 attachEvent0 方 法 注册 事件 ， 用 法 如 下 : | 
element.attachEvent(etype.eventName) | 


参数 说 明 如 下 : 

回 etype: 设置 事件 类 型 ， 如 onclick、onkeyup、onmousemove 等 。 | 

eventName: 设置 事件 名 称 ， 也 就 是 事件 处 理 函 数 。 | 

【示例 3】 在 下 面 示例 中 ， 为 段落 标签 <p> 注 册 两 个 事件 ，mouseover 和 mouseout， 设 计 当 鼠标 | 

经 过 时 ， 段 落 文本 背景 色 显示 为 蓝 色 ， 当 鼠标 移 开 之 后 ， 背 景色 显示 为 红色 。 | 

<pid="p1">IE 事件 注册 </p> 

<script> 

var pl = document.getElementById("p1"): /捕获 段落 元 素 

pl.attachEvent("onmouseover", functionO{ 

pl.style.background = ‘blue'; 
D: 





: /注册 mouseover 事件 

pl.attachEvent("onmouseout", functionO{ 
pl.style.background = red'; 

D; 


1 
/注册 mouseout 事件 | 
</script> | 


滋 提示 : 使 用 attachEvent0 注 册 事 件 时 ， 其 事件 处 理 函 数 的 调用 对 象 不 再 是 当前 事件 对 象 本 身 ， 而 ， 


是 window 对 象 因此 ， 事 件 函 数 中 的 this 就 指向 window， 而 不 是 当前 对 象 ， 如 果 要 获取 
当前 对 象 ， 应 该 使 用 event 的 srcElement 属性 。 


< 注意 : IE 事件 模型 中 的 attachEvent() 方 法 的 第 一 个 参数 为 事件 类 型 名 称 ， 但 需要 加 上 on 前 级 ， 
而 使 用 addEventListener( 方 法 时 ， 不 需要 这 个 on 前 级 ， 如 click。 


19.1.7 ”销毁 事件 | 


在 DOM 事件 模型 中 ， 使 用 removeEventListener0 方 法 可 以 从 指定 对 象 中 删除 已经 注册 的 事件 处 机 绩 训 名 
理 函数 。 用 法 如 下 : | 
element.removeEventListener(String type. Function listener boolean useCapture): 
参数 说 明 参 阅 addEventListener() 方 法 参数 说 明 。 | 
【示例 1] 在 下 面 示例 中 , 分 别 为 按钮 a 和 按钮 b 注 册 click 事件 , 其 中 按钮 a 的 事件 函数 为 ok0， | 
按钮 b 的 事件 函数 为 delete_event0。 在 浏览 器 中 预览 ， 当 单 击 “ 点 我 ”按钮 时 将 弹出 一 个 对 话 框 , 在 | 
不 删除 之 前 这 个 事件 是 一 直 存在 的 。 当 单 击 “ 删 除 事件 ”按钮 之 后 ,“ 点 我 ”按钮 将 失去 任何 效果 ， 
演示 效果 如 图 19.3 所 示 。 | 
<input id="a" type="button" value=" 点 我 " /> L 
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<inputid="b" type="button" value=" 删 除 事件 " /> 


名 


Var a = document.getElementById("a"): // 获 取 按 钮 a 
| varb = document.getElementById("b"): /获取 按钮 b 
全 站 | function okO{ // 按 钮 a 的 事件 处 理 函 数 
| alert(" 您 好 ， 欢 迎 光临 1"); 
} 
function delete_eventO{ /按钮 b 的 事件 处 理 函数 
| a.removeEventListener("click",ok,false); // 移 出 按钮 a 的 click 事件 
| 3 
a.addEventListener("click".ok.false): // 默 认为 按钮 a 注册 事件 
b.addEventListener("click".delete_eventfalse): // 默 认为 按钮 b 注册 事件 


| 
| <scipe 
| 
| 


© 3 ELE] Ey 








图 19.3 注销 事件 


| 窑 提 示 : removeEventListener() 方 法 只 能 够 删除 addEventListener0 方 法 注册 的 事件 。 如 果 直 接 使 用 
onclick 等 直接 写 在 元 素 上 的 事件 ， 将 无 法 使 用 removeEventListener0 方 法 删除 。 
| 当 临时 注册 一 个 事件 时 ， 可 以 在 处 理 完毕 之 后 迅速 删除 它 ， 这 样 能 够 节省 系统 资源 。 


| 正 事件 模型 使 用 detachEvent0 方 法 注销 事件 ， 用 法 如 下 : 
| element.detachEvent(etype.eventName) 


| 参数 说 明 参 阅 attachEvent0 方 法 参数 说 明 。 

| 由 于 下 怪异 模式 不 支持 DOM 事件 模型 ， 为 了 保证 页 面 的 兼容 性 ， 开 发 时 需要 兼容 两 种 事件 模 
| 型 以 实现 在 不 同 浏览 器 中 具有 相同 的 交互 行为 。 

| 【示例 2】 为 了 能 够 兼容 正 事件 模型 和 DOM 事件 模型 ， 下 面 示例 使 用 站 语句 判断 当前 浏览 器 
| 支持 的 事件 处 理 模型 ， 然 后 分 别 使 用 DOM 注册 方法 和 正 注册 方法 为 段落 文本 注册 mouseover 和 
，mouseout 两 个 事件 。 当 触发 mouseout 事件 之 后 ， 再 把 mouseover 和 mouseout 事件 注销 掉 。 


| <p id-"pl"> 注 册 兼容 性 事件 <p> 

| <script> 

| var pl = document.getElementById("p1"); /捕获 段落 元 素 

| var fl = functionO{ // 定 义 事件 处 理 函数 1 
| pl.style.background = "blue' 

| 

| var f2 = functionO{ // 定 义 事件 处 理 函 数 2 
| pl.style.background = red': 

| iftpl.detachEvent) { // 兼 容 正 事件 模型 
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pl.detachEvent("onmouseover". f1); // 注 销 事件 mouseover | 
pl.detachEvent("onmouseout". f2); // 注 销 事件 mouseout | 
} | 
a // 湾 容 DOM 事件 模型 | = 
Ppl.removeEventListener("mouseover". f1); /注销 事件 mouseover | 全 | 
pl.removeEventListener("mouseout", f2): // 注 销 事件 mouseout | 
Ne, 
iplattachEvenD{ 1/ 兼容 正事 件 模型 | 
pl.attachEvent("onmouseover", f1); // 注 册 事 件 mouseover | 
Ppl.attachEvent("onmouseout", 他 ): /注册 事件 mouseout | 
} | 
else{ 1/ 兼容 DOM 事件 模型 | 
pl.addEventListener("mouseover", f1): // 注 册 事 件 mouseover | 
pl.addEventListener("mouseout", f2); // 注 册 事件 mouseout | 
} | 
</scrip> | 


19.1.8 使 用 event 


event 对 象 由 事件 自动 创建 ， 代 表 事件 的 状态 ， 如 事件 发 生 的 源 节点 ， 键 盘 按键 的 响应 状态 ， 鼠 | 
标 指针 的 移动 位 置 ， 鼠 标 按键 的 响应 状态 等 信息 。event 对 象 的 属性 提供 了 有 关 事件 的 细节 ， 其 方法 | 
可 以 控制 事件 的 传播 。 
二 级 DOM Events 规范 定义 了 一 个 标准 的 事件 模型 ， 它 被 除了 正 怪异 模式 以 外 的 所 有 标准 浏览 
器 所 实现 ， 而 正 定义 了 专用 的 、 不 兼容 的 模型 。 简 单 比较 两 种 事件 模型 : 
回 在 DOM 事件 模型 中 ，event 对 象 被 传递 给 事件 处 理 函数 ， 但 是 在 正 事件 模型 中 ， 它 被 存 
储 在 window 对 象 的 event 属性 中 。 | 
回 在 DOM 事件 模型 中 ，Event 类 型 的 各 种 子 接口 定义 了 额外 的 属性 ， 它 们 提供 了 与 特定 事件 | 
类 型 相关 的 细节 ; 在 正 事件 模型 中 只 有 一 种 类 型 的 event 对 象 ， 它 用 于 所 有 类 型 的 事件 。 
下 面 列 出 了 二 级 DOM 事件 标准 定义 的 event 对 象 属性 ， 如 表 19.1 所 示 。 注意 ， 这 些 属性 都 是 只 
读 属性 。 








表 19.1 DOM 事件 模型 中 event 对 象 属性 


























属 性 说 ”了 明 | 
i J 指示 事件 是 否 是 冒 泡 事件 类 型 。 如 果 事 件 是 冒 泡 类 型 ， 则 返回 ttue， 否 则 返回 
lse | 

ee 返回 布尔 值 ， 指 示 事 件 是 否 可 以 取消 的 默认 动作 。 如 果 使 用 preventDefault0 方 法 可 以 取消 与 
事件 关联 的 默认 动作 ， 则 返回 值 为 rue， 否 则 为 false | 
et 返回 触发 事件 的 当前 节点 ， 即 当前 处 理 该 事件 的 元 素 、 文 档 或 窗口 。 在 捕获 和 冒 泡 阶 段 ， 该 | 
属性 是 非常 有 用 的 ， 因 为 在 这 两 个 阶段 ， 它 不 同 于 target 属性 | 
eventPhase 返回 事件 传播 的 当前 阶段 ， 包 括 捕获 阶段 (1) 、 目 标 事件 阶段 (2》 和 冒 泡 阶段 (3) | 

target 返回 事件 的 目标 节点 (触发 该 事件 的 节点 ) ， 如 生成 事件 的 元 素 、 文 档 或 窗口 

timeStamp, 返回 事件 生成 的 日 期 和 时 间 | 
type 返回 当前 event 对 象 表示 的 事件 的 名 称 ， 如 “submit”、“load” 或 “click” | 


| 
| 
| 
L 
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| 下 面 列 出 了 二 级 DOM 事件 标准 定义 的 event 对 象 方法 ， 如 表 19.2 所 示 ，IE 事件 模型 不 支持 这 
| 些 方法 。 
| 
Pus 表 19.2 DOM 事件 模型 中 event 对 象 方法 
全 ”| 方 法 说 明 


initEventO 初始 化 新 创建 的 event 对 象 的 属性 
| _preventDefault0 | 通知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 








| 终止 事件 在 传播 过 程 的 捕获 、 目 标 处 理 或 冒 泡 阶 段 进一步 传播 。 调 用 该 方法 后 ， 该 节点 
上 处 理 该 事件 的 处 理 函 数 将 被 调用 ， 但 事件 不 再 被 分 派 到 其 他 节点 


stopPropagationO 





疱 提示 : 表 19.2 是 Event 类 型 提供 的 基本 属性 ， 各 个 事件 子 模块 也 都 定义 了 专用 属性 和 方法 。 例 
如 ，UIEvent 提供 了 view (发 生 事件 的 window 对 象 ) 和 detail ( 事件 的 详细 信息 ) 属性 。 
而 MouseEvent 除了 拥有 Event 和 UIEvent 属性 和 方法 外 ， 也 定义 了 更 多 实用 属性 ， 详 细 
说 明 可 参考 下 面 章节 内 容 。 
| IE7 及 其 早期 版 本 , 以 及 正 怪异 模式 不 支持 标准 的 DOM 事件 模型 , 并 且 正 浏览 器 的 event 对 象 
| 定义 了 一 组 完全 不 同 的 属性 ， 如 表 19.3 所 示 。 
表 19.3 IE 事件 模型 中 event 对 象 属性 


| 属 性 描述 

cancelBubble 如 果 想 在 事件 处 理 函 数 中 阻止 事件 传播 到 上 级 包含 对 象 ， 必 须 把 该 属性 设 为 true 

| fromElement 对 于 mouseover 和 mouseout 事件 ，fromElement 引用 移出 鼠标 的 元 素 

| 对 于 keypress 事件 ， 该 属性 声明 了 被 敲 击 的 键 生成 的 Unicode 字符 码 。 对 于 keydown 
| keyCode 和 keyup 事件 , 它 指 定 了 被 珊 击 的 键 的 虚拟 键盘 码 。 虚拟 键盘 码 可 能 和 使 用 的 键盘 的 布 
| 局 相关 


| 
| _offsetX、offsetY | 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 X 坐标 和 Y 坐标 
| 如 果 设 置 了 该 属性 , 它 的 值 比 事件 处 理 函数 的 返回 值 优先 级 高 把 这 个 属性 设置 为 false， 











| 可 以 取消 发 生 事件 的 源 元 素 的 默认 动作 

srcElement 对 于 生成 事件 的 window 对 象 、document 对 象 或 element 对 象 的 引用 

| toElement 对 于 _mouseover 和 _mouseout 事件 ， 该 属性 引用 移入 鼠标 的 元 素 

| xy 事件 发 生 的 位 置 的 x 坐标 和 y 坐标 ， 它 们 相对 于 用 _CSS 定位 的 最 内 层 包含 元 素 

| I 下 事件 模型 并 没有 为 不 同 的 事件 定义 继承 类 型 ， 因 此 所 有 与 任何 事件 的 类 型 相关 的 属性 都 在 上 
| 面 列表 中 。 

和 

| 室 提示 : 为 了 兼容 正和 DOM 两 种 事件 模型 ， 可 以 使 用 下 面 表达 式 进行 兼容 。 

| var event = event || window.event: // 兼 容 不 同 模型 的 event 对 象 


| 上 面 代码 右 侧 是 一 个 选择 运算 表达 式 ， 如 果 事件 处 理 函 数 存在 event 实 参 ， 则 使 用 event 形 参 来 
传递 事件 信息 ， 如 果 不 存在 event 参数 ， 则 调用 window 对 象 的 event 属性 来 获取 事件 信息 。 把 上 面 表 
达 式 放 在 事件 处 理 函数 中 即 可 进行 兼容 。 
在 以 事件 驱动 为 核心 的 设计 模型 中 ， 一 次 只 能 够 处 理 一 个 事件 ， 由 于 从 来 不 会 并 发 两 个 事件 ， 因 
| 此 ， 使 用 全 局 变量 来 存储 事件 信息 是 一 种 比较 安全 的 方法 。 
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【示例 】 下 面 示例 演示 了 如 何 禁止 超 链接 默认 的 跳 转 行为 。 


<a hre 全 "https://www.baidu.com/" id="a1"> 禁 止 超 链接 跳 转 </a><script> 
document.getElementById(al).onclick = function(e) { 





e=€||window.event: // 兼 容 事 件 对象 | 含 内 
vartarget=etarget || e.srcElement: // 式 容 事 件 目标 元 素 到 一 
iftargetnodeName ! 一 'A){ // 仅 针对 超 链 接 起 作用 | 
my 
} | 
这 typeofepreventDefault 一 function) { 。// 兼 容 DOM 模型 | 
e.preventDefaultO; // 禁 止 默 认 行 为 | 
e.stopPropagation(); // 禁 止 事 件 传播 | 
} else { 1/ 兼容 正 模型 | 
eretumValue = false; /禁止 默认 行为 | 
e.cancelBubble = true; // 禁 止 冒 泡 | 
i | 
</scrip> | 


19.1.9 ”事件 委托 


事件 委托 (delegate)， 也 称 为 事件 托管 或 事件 代理 ， 就 是 把 目标 节点 的 事件 绑 定 到 祖先 节点 上 。 | 视频 讲解 
这 种 简单 而 优雅 的 事件 注册 方式 是 因为 : 事件 传播 过 程 中 ， 逐 层 冒 泡 总 能 被 祖先 节点 捕获 。 | 
事件 委托 的 优势 : 优化 代码 ， 提 升 运 行 性 能 ， 真 正 把 HTML 和 JavaScript 分 离 ， 也 能 防止 在 动态 | 
添加 或 删除 节点 过 程 中 注册 的 事件 丢失 现象 。 | 
| 
| 





【示例 】 下 面 示例 借助 事件 委托 技巧 ， 利 用 事件 传播 机 制 ， 在 列表 框 元 素 上 绑 定 click 事件 ， 
当 事 件 传播 到 父 节点 ul 上 时 ， 捕 获 click 事件 ， 然 后 在 事件 处 理 函 数 中 检测 当前 事件 响应 节点 类 型 ， 
如 果 是 二 元 素 ， 则 进一步 执行 下 面 代码 ， 否 则 跳出 事件 处 理 函 数 ， 结 束 响应 。 
<button id="btn"> 添 加 列表 项 目 </button> | 
<ul id="list'> | 
<I 记 列表 项 目 1<hi> | 
<li> 列 表 项 目 2</li> 
<1i> 列 表 项 目 3</li> 
</ul> 
<script> | 
var ul=document.getElementById("list"): | 
ul.addEventListener('click' .function(e){ | 
var e =€ || window.event: 
var target = etarget | e.srcElement: 
if(e.target&&e.target.nodeName.toUpperCase0 二 "LI"){ ”/* 判 断 目标 事件 是 否 为 li*/ 
alert(e.target.innerHTMI): | 
} | 
}.false): | 
Vari=4: 
Var btn=document.getElementById("“btn"); 
btn.addEventListener("click" function| { 
var li= document.createElement("li"): 
liinnerHITML = "列表 项 目 " + i++ 
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全 办 | 当 页 面 存在 大 量 元 素 ,并 且 每 个 元 素 注册 了 一 个 或 多 个 事件 时 ， 可 能 会 影响 性 能 。 访问 和 修改 更 

Ei 多 的 DOM 节点 ， 程 序 就 会 更 慢 ， 特 别 是 事件 连接 过 程 都 发 生 在 load (或 DOMContentReady) 事件 

中 时 ， 对 任何 一 个 富 交互 网 页 来 说 ， 这 都 是 一 个 繁忙 的 时 间 段 。 另 外 ， 浏 览 器 需要 保存 每 个 事件 句柄 
| 的 记录 ， 也 会 占用 更 多 内 存 。 


19.2 案例 实战 


| 下 面 结合 案例 讲解 这 些 事件 类 型 的 典型 应 用 。 
19.2.1 设计 鼠标 拖 放 操作 


| mousemove 事件 类 型 是 一 个 实时 响应 的 事件 ， 当 鼠标 指针 的 位 置 发 生变 化 至 少 移动 1 个 像素 ) 
时， 就 会 触发 mousemove 事件 。 该 事件 响应 的 灵敏 度 主要 参考 鼠标 指针 移动 速度 的 快慢 ， 以 及 浏览 
| 器 跟踪 更 新 的 速度 。 

| 【示例 】 下 面 示例 演示 了 如 何 综合 应 用 各 种 鼠标 事件 实现 页 面 元 素 拖 放 操作 的 设计 过 程 。 实 现 拖 
| 放 操 作 设计 ， 需 要 厘清 和 解决 几 个 技术 问题 。 
| 第 1 步 ， 定 义 被 拖 放 元 素 为 相对 定位 或 绝对 定位 ， 以 及 设计 事件 的 响应 过 程 。 
| 





| 第 2 步 ， 清 楚 几 个 坐标 概念 : 按 下 鼠标 时 的 指针 坐标 ， 移 动 中 当前 鼠标 的 指针 坐标 ， 松 开 鼠 标 时 
| 的 指针 坐标 ， 拖 放 元 素 的 原始 坐标 ， 拖 动 中 的 元 素 坐 标 。 

| 第 3 步 ， 算 法 设计 : 按 下 鼠标 时 ， 获 取 被 拖 放 元 素 和 鼠标 指针 的 位 置 ， 在 移动 中 实时 计算 鼠标 偏 
| 移 的 距离 ， 并 利用 该 偏 移 距离 加 上 被 拖 放 元 素 的 原 坐标 位 置 ， 获 得 拖 放 元 素 的 实时 坐标 。 

| 如 图 19.4 所 示 ， 其 中 变量 ox 和 oy 分 别 记 录 按 下 鼠标 时 被 拖 放 元 素 的 纵横 坐标 值 ， 它 们 可 以 通 
| 过 事件 对 象 的 offsetLeft 和 offsetTop 属性 获取 。 变 量 mx 和 my 分 别 表示 按 下 鼠标 时 ， 鼠 标 指针 的 坐 
| 标 位 置 ， 而 eventmx 和 eventmy 是 事件 对 象 的 自 定义 属性 ， 用 它们 来 存储 当 鼠 标 移动 时 鼠标 指针 的 
| 实时 位 置 。 


| 
| 
| oy+eventmy 一 my 
| 





| 
图 19.4 拖 放 操作 设计 示意 图 
| 当 获 取 了 上 面 3 对 坐标 值 之 后 ， 就 可 以 动态 计算 拖 动 中 元 素 的 实时 坐标 位 置 ， 即 x 轴 值 为 ox + 
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event.mx — mx, y 轴 为 Oy +event.my— my。 当 释 放 鼠 标 按 钮 时 ， 则 可 以 释放 事件 类 型 ， 并 记 下 松 开 鼠 
标 指针 时 拖 动 元 素 的 坐标 值 ， 以 及 鼠标 指针 的 位 置 ， 留 待 下 一 次 拖 放 操作 时 调用 。 


整个 拖 放 操 作 的 示例 代码 如 下 : 
<div id="box" ><img stc="images/bg.jpg" /></div> 





<script> 

// 初 始 化 拖 放 对 象 
var box = document.getElementById("box"): // 获 取 页 面 中 被 拖 放 元 素 的 引用 | 
box.style position = "absolute": // 绝 对 定位 | 
/初始 化 变量 ， 标 准 化 事件 对 象 | 
Var mx, my, Ox, Oy; // 定 义 备 用 变量 | 
function e(evenb{ // 定 义 事件 对 象 标准 化 函数 | 
这 !evenbf{ // 兼 容 正 浏览 器 | 
event = window.event: | 
event.target = event.srcElement: | 
event.layerX = event.offsetX: | 
event.layerY = eventoffsetY' | 
} | 
event.mx = event.pageX || event.clientX + documentbody.scrollLeft ” // 计 算 鼠 标 指针 的 x 轴 距 离 | 
event.my = event.pageY || event.clientY + documentbody.scrollTop: 。 // 计 算 鼠 标 指针 的 y 轴 距 离 | 
Tetum event: // 返 回 标准 化 的 事件 对 象 | 
1 


} 
/定义 鼠标 事件 处 理 函数 
document.onmousedown = function(event){ 


// 按 下 鼠标 时 ， 初 始 化 处 理 


event = e(event): // 获 取 标 准 事件 对 象 | 
o=eventtarget // 获 取 当 前 拖 放 的 元 素 | 
ox = parseInt(0.offsetLeft): // 拖 放 元 素 的 x 轴 坐 标 | 
oy= parseInt(o.offsetTop): // 拖 放 元 素 的 y 轴 坐 标 | 
mx = event .mx: // 按 下 鼠标 指针 的 x 轴 坐 标 | 
my = event-my: // 按 下 鼠标 指针 的 y 轴 坐 标 | 
document.onmousemove = move: // 注 册 鼠 标 移动 事件 处 理 函数 | 
document.onmouseup = stop: // 注 册 松 开 鼠 标 事件 处 理 函 数 | 
} | 
function move(event){ // 鼠 标 移动 处 理 函 数 | 
event = e(event): | 
0.style.left = ox + event.mx - mx +"px"; // 定 义 拖 动 元 素 的 x 轴 距 离 | 
0.style.top = 0y + event.my - my + "px"; /定义 拖 动 元 素 的 y 轴 距 离 | 
| 
function stop(event){ // 松 开 鼠 标 处 理 函数 | 
event = e(event): | 
ox = parseInt(0.offsetLeft); // 记 录 拖 放 元 素 的 x 轴 坐 标 | 
oy = parseInt(o.offsetTop): // 记 录 拖 放 元 素 的 y 轴 坐 标 | 
mx=eventmx : // 记 录 鼠 标 指针 的 x 轴 坐 标 | 
my = event.my : 1/ 记录 鼠 标 指针 的 y 轴 坐 标 | 
0 = document.onmousemove = document.onmouseup = null: /释放 所 有 操作 对 象 | 


} 


</script> 
在 浏览 器 中 预览 ， 可 以 看 到 当 拖 动 <div id="box" > 标签 时 ， 这 个 对 象 随 着 鼠标 而 移动 ， 当 松 开 鼠 


标 左 键 时 ， 即 可 放下 被 拖 动 的 对 象 ， 并 定位 到 新 位 置 上 显示 ， 效 果 如 图 19.5 所 示 。 
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初始 位 置 拖 放 后 的 位 置 
图 19.5 拖 放 操作 演示 效果 
19.2.2 设计 鼠标 跟随 特效 
| 当 事 件 发 生 时 ， 获 取 鼠 标 位 置 是 一 件 很 重要 的 事件 。 但 是 不 同 浏览 器 在 Event 对 象 中 定义 了 不 同 
| 的 属性 ， 说 明 如 表 19.4 所 示 。 这 些 属 性 都 以 像素 值 定 义 了 鼠标 指针 的 坐标 ， 但 是 它们 参照 的 坐标 系 


| 不同， 导致 准确 计算 鼠标 的 位 置 是 一 件 比较 麻烦 的 事 。 
| 表 19.4 ”Event 对 象 关于 鼠标 位 置 的 属性 列表 




















| 
| 属 性 说 有明 兼容 性 
一 cientX | 以 浏览 器 窗口 左上 顶 角 为 原点 ， 定 位 x 轴 坐 标 所 有 浏览 器 ， 不 兼容 Safari 
| _ elienty | 以 浏览 器 窗口 左上 顶 角 为 原点 ， 定 位 y 轴 坐 标 所 有 浏览 器 ， 不 兼容 Safari 
| _ offketx | 以 当前 事件 的 目标 对 象 左上 项 角 为 原点 ， 定 位 x 轴 坐 标 所 有 浏览 器 ， 不 兼容 Mozilla 
otisetY | 以 当前 事件 的 目标 对 象 左上 顶 角 为 原点 ,定位 y 轴 毕 标 所 有 浏览 器 ， 不 兼容 Mozilla 
| yy 目 点 ， 0 
| i 人 〈 即 文档 窗口 ) 左上 项 角 为 原点 ， 定 位 x 轴 所 有 浏览 器 ， 不 兼容 正 
车 ee 《 即 文档 窗口 ) 左上 项 角 为 原点 ， 定 位 y 轴 | 二 丰 济 几 中。 不 六 家 下 
screenX | 计算 机 屏幕 左上 顶 角 为 原点 ， 定 位 x 轴 华 标 所 有 浏览 器 
”screenY | 计算 机 屏幕 左上 项 有 角 为 原点 ， 定 位 y 轴 举 标 所 有 浏览 器 
| 最 近 的 绝对 定位 的 父 元 素 如果 没有 ， 则 为 Document 对 象 ) 左 | 

lyerX | 上 顶 角 为 原点 ， 定 位 x 轴 毕 标 MH 

layery | 最 的 绝对 定位 的 父 元 素 〔 如 果 没 有 ， 则 为 Documment 对 象 ) 左 | Woaa 和 Sai 





上 项 角 为 原点 ， 定 位 了 轴 坐 标 


F 面 介绍 如 何 配合 多 个 鼠标 坐标 属性 ， 设 计 兼 容 不 同 浏览 器 的 鼠标 定位 方案 。 
【操作 步 又】 
第 1 步 ，screenX 和 sereenY 属性 获得 了 所 有 浏览 器 的 支持 ， 应 该 是 最 优选 用 属性 ， 但 是 它们 的 
， 坐标 系 是 计算 机 屏幕 ,以 计算 机 屏幕 左上 角 为 定位 原点 。 这 对 于 以 浏览 器 窗口 为 活动 空间 的 网 页 来 说 ， 
， 没有 任何 价值 。 因为 不 同 的 屏幕 分 辩 率 ， 不 同 的 浏览 器 窗口 大 小 和 位 置 都 使 在 网 页 中 定位 鼠标 成 为 一 
， 件 很 困难 的 事情 。 
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第 2 步 ， 如 果 以 Document 对 象 为 坐标 系 ， 则 可 以 考虑 选用 pageX 和 pageY 属性 ， 实 现在 浏览 器 | 
窗口 中 进行 定位 。 这 对 于 设计 鼠标 跟随 是 一 个 好 主意 ， 因 为 跟随 元 素 一 般 都 以 绝对 定位 的 方式 在 浏览 | 
器 窗口 中 移动 ， 在 mousemove 事件 处 理 函 数 中 把 pageX 和 pageY 属性 值 传递 给 绝对 定位 元 素 的 top | 
和 left 样式 属性 即 可 。 | 
但 是 正 浏览 器 不 支持 它们 ， 为 此 我 们 还 需 寻 求 兼容 正 浏览 器 的 方法 。 而 clientX 和 elientY 属性 | 
是 以 window 对 象 为 坐标 系 ， 且 正 浏览 器 支持 它们 ， 可 以 选用 它们 。 
第 3 步 ， 不 过 考虑 window 等 对 象 可 能 会 出 现 的 滚动 条 偏 移 量 ， 所 以 还 应 加 上 相对 于 window 对 | 
象 的 页 面 滚动 的 偏 移 量 。 于 是 ， 可 以 这 样 来 设计 兼容 性 代码 : | 





Var posX =0, posY =0; /定义 坐标 变量 初始 值 
Var event = event || windowevent // 标 准 化 事件 对 象 
iflevent.pageX || event.pageY){ // 如 果 浏 览 器 支持 该 属性 ， 则 采用 它们 


posX = event.pageX; 
posY = event.pageY: 
} 
else if(event.clientX | event.clientY){ /否则 ， 如 果 浏 览 器 支持 该 属性 ， 则 采用 它们 
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft: 
posY= event.clientY + document.documentElement.scrollTop + document.body.scrollTop; | 
} | 
在 上 面 代码 中 ， 先 检测 pageX 和 pageY 属性 是 否 存 在 ， 如 果 存 在 则 获取 它们 的 值 ， 如 果 不 存在 ， | 
则 检测 并 获取 clientX 和 clientY 属性 值 。 | 
第 4 步 , 加 上 document.documentElement 和 document.body 对 象 的 scrollLeft 和 scrollTop 属性 值 ，| 
这 样 就 可 以 在 不 同 浏览 器 中 获得 相同 的 坐标 值 。 
【示例 】 解 决 了 鼠标 定位 核心 技术 问题 ， 下 面 就 来 设计 本 例 的 设计 思路 : | 
根据 指定 的 跟随 对 象 ， 获 取 相 对 鼠标 指针 的 偏 移 值 ， 设 计 一 个 定位 函数 ， 设 计 函 数 传 入 参数 为 跟 | 
随 对 象 、 相 对 鼠标 指针 的 偏 移 距离 ， 以 及 事件 对 象 。 | 
然后 ， 定 位 函数 能 够 根据 事件 对 象 获取 鼠标 的 坐标 值 ， 并 设置 该 对 象 为 绝对 定位 ， 绝对 定位 的 值 | 
为 鼠标 指针 当前 的 坐标 值 。 
最 后 ， 设 计 的 本 示例 完整 代码 如 下 所 示 : 
<script> 
// 鼠 标定 位 函数 
/参数 o 表示 跟随 对 象 ，x 和 y 表示 跟随 对 象 与 鼠标 指针 的 偏 移 值 ，event 表示 Event 对 象 
Var pos = function(o., x, Yevenb{ | 
var posX =0. posY =0; /临时 变量 值 | 


vare= event || window.event: /标准 化 事件 对 象 

ifle.pageX || e.pageY){ 1/ 获取 鼠标 指针 的 当前 坐标 值 
PosX =e.pageX: 
posY = e.pageY: 


} 
else ife.clientX || e.clientY){ 
posX= eclientX + document.documentElement.scrollLeft + document.body.scrollLeft: 
POsY = e.clientY + document.documentElement.scrollTop + document.body.scrollTop; 
} 


0.style.position = "absolute": // 定 义 当前 对 象 为 绝对 定位 
ostyletop = (posY + y) + "px": // 设 置 对 象 y 轴 坐 标 
0.style.left = (posX + x) + "px": /设置 对 象 X 轴 坐标 
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| </scrip> 
<divid-"div1"> 跟 随 鼠 标的 文字 </div> 
<script language="javascript" type="text/javascript"> 


合 F | var divl = document.getElementById("div1"): 
ne | document.onmousemove = function(event){ 
pos(div1. 10, 20.evenb: /设计 在 文档 中 移动 鼠标 时 ， 调 用 鼠标 定位 函数 
} 
| 


| scrip> 
| 为 Document 对 象 注册 鼠标 移动 事件 处 理 函 数 ， 并 传 入 鼠标 定位 函数 ， 传 入 的 对 象 为 <div 
| id=-"divl"> 标 签 ， 设 置 其 位 置 向 鼠标 指针 右 下 方 偏 移 10.20) 的 距离 。 考 虑 到 非 正 浏览 器 通过 参数 
| 形式 传递 事件 对 象 ， 所 以 不 要 忘记 在 调用 函数 中 也 要 传递 事件 对 象 。 最 后 ， 在 浏览 器 中 预览 ， 移 动 鼠 
| 标 指针 ， 则 可 以 看 到 <div id="div1"> 标 签 始 终 跟随 鼠标 指针 移动 ， 如 图 19.6 所 示 。 
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和 | 图 19.6 和 鼠标 跟随 特效 
. 


| 19.2.3 ”跟踪 鼠标 在 对 象 内 相对 位 置 


| 获取 鼠标 指针 在 目标 对 象 内 的 坐标 ， 可 以 使 用 offsetX 和 offsetY 属性 ， 但 是 Mozilla 浏览 器 不 支 
| 持 。 如 果 结合 layerX 和 layerY 属性 ， 可 以 兼容 Mozilla 浏览 器 。 核 心 代码 如 下 : 
| Var event = event || window.event: 
| 这 eventoffsetX | eventoffsetY ){ // 适 用 非 Mozilla 浏览 器 
X= event.offsetX; 
y = event.offsetY: 





} 

else if(event.layerX || eventlayerY ){ 1/ 兼容 Mozilla 浏览 器 
X= event.layerX: 
y = event.layerY:; 


} 

| 考虑 到 layerX 和 layerY 属性 是 以 定位 元 素 为 参照 物 ， 而 不 是 目标 对 象 自身 。 如 果 没有 定位 元 素 ， 

| 则 会 以 Document 对 象 为 参照 物 。 因 此 ， 为 了 解决 这 个 问题 ， 可 以 通过 脚本 方式 或 者 手动 方式 添加 一 

| 个 定位 包含 框 ， 这 样 就 可 以 解决 layerX 和 layerY 不 能 够 在 目标 对 象 内 直接 定位 问题 。 如 果 考 虑 包含 
| 框 与 目标 对 象 间距 和 边 距 所 造成 的 误差 ， 可 以 酌情 减 去 1 个 或 几 个 像素 的 偏 移 量 。 
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F 面 就 来 设计 一 个 带 有 网 格 背景 的 盒子 然后 在 一 个 文本 区 域 中 动态 跟踪 鼠标 在 当前 盒子 中 的 相 
对 坐标 位 置 。 
【操作 步骤 】 

第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 testhtml。 设 计 一 个 简单 的 文档 结构 : 在 页 面 中 | 图 
包含 一 个 文本 区 域 ， 用 来 动态 显示 鼠标 相对 坐标 值 ， 一 个 <div id="wrap"> 标 签 ， 用 来 设计 背景 网 格 ; 
一 个 <span> 标 签 ， 设 计 为 相对 定位 显示 ， 用 来 获取 鼠标 指针 在 盒子 内 的 相对 坐标 值 ， 一 个 盒子 <div 
id="box">。 | 





<body> 

第 2 步 ， 在 头 部 标签 <head> 内 插入 一 个 <style type-"textess"> 标 签 ， 设 计 内 部 样式 表 。 为 <div | 
id="wrap"> 标 签 定义 网 格 背 景 ， 为 <span> 标 签 定义 相对 定位 ， 为 <div id="box"> 标 签 定义 大 小 和 边框 ， | 
设计 文本 区 域 浮动 到 右 侧 显 示 。 页 面 显示 效果 如 图 19.7 所 示 ， 详 细 代码 如 下 所 示 ， | 


<style type="text/css"> 
#wrap {/* 定义 网 格 背景 ， 设 计 参 照 坐标 系 */ 
background:url(images/bg.png) no-repeat: | 
float:left: | 
padding-left:14px; | 
padding-top:14px:} 
#wrap span{position:relative:} /* 定义 定位 包含 框 ， 为 获取 鼠标 指针 相对 坐标 进行 参照 */ 
#box {/* 定义 盒子 的 大 小 、 边 框 样式 */ 
border:solid 1px red: | 
width:400px: | 
height:300px:} | 
#ext{/* 定义 文本 区 域 样式 ， 以 便 显示 动态 坐标 信息 */ 
height:4em: 
width:8em: 
float:right: | 
border:solid 1px blue:} | 
</style> | 
第 3 步 , 设计 JavaScript 脚本 : 在 页 面 加 载 完毕 之 后 调用 load 事件 处 理 函 数 , 获取 文本 区 域 对 象 、| 
目标 盒子 对 象 。 在 盒子 对 象 上 绑 定 mousemove 事件 ， 设 计 当 鼠标 移动 时 ， 实 时 跟踪 鼠标 指针 的 相对 | 
位 置 。 在 mousemove 事件 处 理 函 数 中 ， 利 用 上 面 介绍 鼠标 指针 相对 位 置 跟踪 解决 技术 方案 ， 获 取 相 
对 坐标 位 置 ， 然 后 把 该 值 动态 输出 到 文本 区 域 中 显示 。 完 整 脚本 如 下 所 示 : | 
<script> 
window.onload = functionO{ 


Var t= document.getElementById("text"): 
Var box = document.getElementById("box"): 
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box.onmousemove = function(event){ 


| 
| var event = event || window.event: /标准 化 事件 对 象 
| if(event.offsetX || event.offsetY ){ /| 来 容 非 Mozilla 浏览 器 
全 g tvalue ="x:" + parseInt(event.offsetX) + "my:" + parseInt(event.offsetY): 
| } 
~ | else if(event layerX || event.-layerY ){ /来 容 Mozilla 浏览 器 
tvalue ="x:" + parseInt(event.layerX - 1) + "my:" + parseInt(event.layerY -]) : 
本 
| } 
</script> 


| 
| 第 4 步 ， 在 浏览 器 中 预览 ， 然 后 在 盒子 内 移动 鼠标 ， 可 以 看 到 文本 区 域 中 动态 显示 当前 鼠标 指针 
| 的 相对 坐标 位 置 ， 如 图 19.8 所 示 。 











图 19.7 页 面 初始 化 设计 效果 图 19.8 动态 跟踪 鼠标 指针 在 对 象 内 的 相对 位 置 


| 窑 提示 : 上 述 兼容 方案 解决 在 目标 对 象 内 定位 鼠标 指针 的 问题 . 由 于 在 目标 对 象 外 包 衷 一 个 定位 元 
| 素 ， 这 会 破坏 页 面 结构 。 为 了 避免 麻烦 ， 可 以 考虑 通过 JavaScript 脚本 形式 动态 添加 定位 
| 包含 框 ， 当 获取 到 鼠标 指针 的 相对 坐标 后 ， 再 以 脚本 形式 删除 这 个 定位 包含 框 。 


19.2.4 ”设计 推 箱 子 游戏 
i 2 如 当 用 户 操作 键盘 时 会 触发 键盘 事件 , 键盘 事件 主要 包括 下 面 3 种 类 型 : 
二 :keydown、keypress、keyup。 有 关键 盘 事件 的 详细 说 明和 示例 演示 ， 请 扫 码 










resize 事件 类 型 是 在 浏览 器 窗口 被 重 置 时 触发 的 。 例 如 ， 当 用 户 调整 
5 窗口 大 小 ， 或 者 最 大 化 、 最 小 化 、 恢 复 窗口 大 小 显示 时 触发 resize 事件 。 
| : 和 从 知名 ”利用 该 事件 可 以 跟踪 窗口 大 小 的 变化 以 便 动态 调整 页 面 元 素 的 显示 大 小 。 

| 和 有 关 resize 事件 的 示例 演示 ， 请 扫 码 阅读 。 
| 
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19.2.6 ”自动 读 取 选择 文本 


当 在 文本 框 或 文本 区 域内 选择 文本 时 ， 将 触发 select 事件 。 通 过 该 
事件 ， 可 以 设计 用 户 选择 操作 的 交互 行为 。 有 关 select 事件 的 示例 演示 ， 
请 扫 码 阅读 。 


19.2.7 ”设计 自动 跳 转 菜单 


change 事件 类 型 是 在 表单 元 素 的 值 发 生变 化 时 触发 , 主要 用 于 select 
和 textarea 元 素 。 有 关 change 事件 的 示例 演示 ， 请 扫 码 阅读 。 


19.2.8 ”禁止 表单 提交 


submit 事件 类 型 仅 在 表单 内 单 击 提交 按钮 ， 或 者 在 其 中 的 输入 表单 
元 素 内 按 Enter 键 时 触发 。 有 关 submit 事件 的 示例 演示 ， 请 扫 码 阅读 。 


19.2.9 分享 选中 文本 


本 例 使 用 JavaScript 实现 在 网 页 中 选中 文本 ， 弹 出 提示 图 标 ， 人 允许 
用 户 把 选中 的 文本 分 享 到 新 浪 微 博 。 具体 示 例 代 码 和 说 明 ， 请 扫 码 阅读 。 





19.3 在 线 练 习 


练习 Javaseript 事件 的 应 用 ， 培 养 读者 灵活 使 用 Javaseript 事件 设计 各 种 交互 式 页 面 特效 的 基本 | 
能 力 。 | 
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操作 CSS 样式 


在 Web 开发 中 ，CSS 的 作用 不 容 急 视 ， 很 多 交互 行为 都 需要 CSS 来 配合 完成 。 使 用 CSS 
和 JavaScript 可 以 创造 出 完美 的 视觉 效果 和 用 户 体验 。 本 章 将 介绍 如 何 使 用 JavaScript 脚本 驱动 


CSS 样式 ， 完 成 各 种 交互 式 行为 的 设计 


【 学 习 要 点 】 

WI 使 用 JavaScript 操作 行内 样式 

WI 使 用 JavaScript 操作 样式 表 

MI 设计 简单 的 页 面 交 互 行为 或 将 效 


第 20 幸 把 作 CSS 样 式 一 G33 | 
< 


20.1 操作 CSS 样式 基础 | 





DOM 2 级 规范 为 CSS 样式 的 脚本 化 定义 了 一 套 API。 在 DOM 2 级 规范 中 ， 与 CSS 相关 的 规范 ， 
都 包含 在 styleSheets、CSS 和 CSS2 这 3 个 模块 中 。 本 节 将 简单 介绍 如 何 正 确 访问 脚本 样式 ， 不 涉及 
各 个 模块 的 系统 内 容 。 | 


20.1.1 访问 行内 样式 


CSS 样式 包括 3 种 形式 : 外 部 样式 、 内 部 样式 和 行内 样式 。 在 早期 DOM 中 ， 任 何 支持 style 属 | 
性 的 HTML 标签 在 JavaScript 中 都 有 一 个 映射 的 style 属性 。 | 

HTMLElement 的 style 属性 是 一 个 可 读 可 写 的 CSS2Properties 对 象 。CSS2Properties 对 象 表示 一 | 
组 CSS 样式 属性 及 其 值 ， 它 为 每 一 个 CSS 属性 都 定义 了 一 个 JavaScript 脚本 属性 。 

这 个 style 对 象 包含 了 通过 HTML 的 style 属性 设置 的 所 有 CSS 样式 信息 ， 但 不 包含 样式 表 中 的 
样式 。 因 此 ， 使 用 元 素 的 style 属性 只 能 访问 行内 样式 ， 不 能 访问 样式 表 中 的 样式 信息 。 

style 对 象 可 以 通过 cssText 属性 返回 行内 样式 的 字符 串 表示 。 字 符 串 中 去 掉 了 包围 属性 和 值 的 花 
括号 ， 以 及 元 素 选择 器 名 称 。 

除了 cssText 属性 外 ,style 对 象 还 包含 每 一 个 与 CSS 属性 一 一 映射 的 脚本 属性 (需要 浏览 器 支持 )。 | 
这 些 脚 本 属性 的 名 称 与 CSS 属性 的 名 称 紧密 对 应 , 但 是 为 了 避免 JavaScript 语法 错误 而 进行 了 一 些 改 | 
变 。 含 有 连 字 符 的 多 词 属性 (如 font-family) 在 JavaScript 中 会 删除 这 些 连 字符 ， 以 驼峰 命名 法 重新 | 
命名 CSS 的 脚本 属性 名 称 〈 如 fontFamily )。 | 

【示例 】 对 于 border-right-color 属性 来 说 ,在 脚本 中 应 该 使 用 borderRightColor， 所 以 下 面 页 面 脚 | 

本 中 的 用 法 都 是 错误 的 。 | 

<div id="box" > 盒子 </div> 

<script> | 

Var box = document.getElementById("box"): | 

box.style.border-right-color = "red"; | 

box.style.border-right-style = "solid": 





</script> 
针对 上 面 页 面 脚本 ， 可 以 修改 为 : 
<script> 


Var box = document.getElementById("box"): 

box.style.borderRightColor = "red": 

box.style.borderRightStyle = "solid": 

</script> 

容 提示 : 使 用 CSS 脚本 属性 时 ， 应 该 注意 几 个 问题 : 

由 于 float 是 JavaScript 保留 字 , 禁止 使 用 , 因此 使 用 cssFloat 表示 float 属性 的 脚本 名 称 。 
在 JavaScript 中 , 所 有 CSS 属性 值 都 是 字符 串 ， 必 须 加 上 引号 ， 以 表示 字符 串 数 据 类 型 。 
elementNode.style.fontFamily = "Arial. Helvetica. sans-serif' 
elementNode.style.cssFloat = "left": 
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六 

elementNode.style.color = "#ff0000": 

CSS 样式 声明 结尾 的 分 号 不 能 作为 属性 值 的 一 部 分 被 引用 ，JavaScript 脚本 中 的 分 号 
只 是 JavaScript 语法 规则 的 一 部 分 ， 不 是 CSS 声明 中 分 号 的 引用 。 


和 | 加 声明 中 属性 值 和 单位 都 必须 作为 值 的 一 部 分 完整 地 传递 给 CSS 脚本 属性 ， 略 单位 则 
pp | 所 设置 的 脚本 样式 无 效 。 
elementNode style .width = "100px"; 


| 在 脚本 中 可 以 动态 设置 属性 值 ， 但 最 终 赋值 给 属性 的 值 应 是 一 个 字符 囊 。 

elementNode.style.top = top + "px"; 

clementNode.style .right = right + "px"; 

clementNode.style.bottom = bottom + "px": 

clementNode.style.left = left + "px":; 

如 果 没有 为 HTML 标签 设置 style 属性 ,那么 style 对 象 中 可 能 会 包含 一 些 属性 的 默认 值 ， 
但 这 些 值 并 不 能 准确 地 反映 该 元 素 的 样式 信息 。 





DOM 2 级 样式 规范 为 style 对 象 定义 了 一 些 属性 和 方法 ， 简 单 说 明 如 下 : 
cssText: 访问 HTML 标签 中 style 属性 的 CSS 代码 。 
length: 元 素 定义 的 CSS 属性 的 数量 。 
parentRule: 表示 CSS 的 CSSRule 对 象 。 
getPropertyCSSValue0: 返回 包含 给 定 属性 值 的 CSSValue 对 象 。 
getPropertyPriority0: 返回 指定 CSS 属性 中 是 否 附加 了 !important 命令 。 
item0: 返回 给 定位 置 的 CSS 属性 的 名 称 。 
getPropertyValue(): 返回 给 定 属性 的 字符 串 值 。 
removeProperty(): 从 样式 中 删除 给 定 属性 。 
setProperty(): 将 给 定 属 性 设置 为 相应 的 值 ， 并 加 上 优先 权 标志 。 
下 面 重点 介绍 style 对 象 方法 的 使 用 。 
| 1. getPropertyValue() 方 法 
| setproperyvalue0 能 够 取 指定 元 素 样 式 属性 的 值 。 用 法 如 下 
| var value = e.style.getPropertyValue(propertyName) 


| 参数 propertyName 表示 CSS 属性 名 ， 不 是 CSS 脚本 属性 名 ， 对 于 复合 名 应 该 使 用 连 字符 进 
| 行 连接 。 


| 【示例 1】 下 面 代码 使 用 getPropertyValue0 方 法 获取 行内 样式 中 width 属性 值 ， 然 后 输出 到 盒子 
| 内 显示 ， 如 图 20.1 所 示 。 

















回回 回回 回回 图 轿 加 








| <script> 

| window.onload = functionO){ 

| var box = document.getElementById("box"): // 获 取 <div id="box"> 

| Var width = box.style.getPropertyValue("width"): 。“// 读 取 div 元 素 的 width 属性 值 
| box.innerHTML = "盒子 宽度 : "+ width: // 输 出 显示 width 值 

| } 
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</script> 
<div id="box" style="width:300px: height:200px:border:solid 1px red" > 盒子 </div> 


SS Er 











图 20.1 使 用 getPropertyValue0 方 法 读 取 行内 样式 


l 

| 

早期 下 浏览 器 版 本 不 支持 getPropertyValue0 方 法 ， 但 是 可 以 通过 style 对 象 直接 访问 样式 属性 ， | 
以 获取 指定 样式 的 属性 值 。 | 
【示例 2】 针 对 上 面 示例 代码 ， 可 以 使 用 如 下 方式 读 取 width 属性 值 。 | 
windowonload = functionOf | 
var box = document.getElementById("box"):; | 

var width = box.style.width: | 
box.innerHTML = "盒子 宽度 : "+ width; | 

. | 
| 

| 

| 

| 

| 


2. setProperty0 方 法 

setProperty( 方 法 为 指定 元 素 设置 样式 。 具 体 用 法 如 下 : 

€.style.setProperty(propertyName, value, priority) 

参数 说 明 如 下 : 

propertyName: 设置 CSS 属性 名 。 

value: 设置 CSS 属性 值 ， 包 含 属性 值 的 单位 。 

回 。 priority: 表示 是 否 设置 :important 优先 级 命令 ， 如 果 不 设置 ， 则 可 以 以 空 字符 串 表 示 。 
【示例 3】 在 下 面 示例 中 使 用 setProperty0 方 法 定义 盒子 的 显示 宽度 和 高 度 分 别 为 400 像素 和 200 | 


<div id="box" style="border:solid 1px red" > 盒子 </div> 


像素 。 

<script> 
window.onload = functionO{ | 
var box = document.getElementById("box"): /| 获取 <div id="box"> | 
box.style.setProperty("width","400px".""): /定义 盒子 宽度 为 400 像素 | 
box.style.setProperty("height","200px",""): // 定 义 盒子 宽度 为 200 像素 | 

. | 
‘</script> 

[ 

| 


如 果 兼 容 早 期 正 浏览 器 ， 则 可 以 使 用 如 下 方式 设置 。 


window.onload = functionO{ 
var box = document.getElementById("box"): 
box style width = "400px"; 
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| box .style height = "200px": 

| } 

| 3. removeProperty() 方 法 

removeProperty0 方 法 可 以 移出 指定 CSS 属性 的 样式 声明 。 具 体 用 法 如 下 : 


| 
‘Note €.style. removeProperty (propertyName) 
| 


| 4. item() 方 法 

item() 方 法 返回 style 对 象 中 指定 索引 位 置 的 CSS 属性 名 称 。 具 体 用 法 如 下 : 

Var name =e.style.item(index) 

参数 index 表示 CSS 样式 的 索引 号 

5. getPropertyPriority(0 方 法 

| getPropertyPriority0 方 法 可 以 获取 指定 CSS 属性 中 是 否 附 加 了 !important 优先 级 命令 , 如果 存在 则 
| 返回 “important” 字 符 串 ， 和 否则 返回 空 字符 串 。 

| 【示例 4】 在 下 面 示 例 中 ， 定 义 鼠 标 移 过 盒子 时 ， 设 置 盒子 的 背景 色 为 蓝 色 ， 边 杠 颜 色 为 红色 ， 
| 当 移 出 盒子 时 ， 又 恢复 到 盒子 默认 设置 的 样式 ， 而 单 击 盒子 时 则 在 盒子 内 输出 动态 信息 ， 显 示 当 前 盒 
子 的 宽度 和 高 度 ， 演 示 效 果 如 图 20.2 所 示 。 



































到 一 | 
,EmoE Ee 


























默认 显示 效果 鼠标 经 过 效果 鼠标 单 击 效果 
图 20.2 设计 动态 交互 样式 效果 


<script> 

window.onload = functionO{ 
var box = document.getElementById("box"): /获取 盒子 的 引用 
box.onmouseover = functionO{ // 定 义 鼠 标 经 过 时 的 事件 处 理 函 数 


box.style.setProperty("backeround-color". "blue", ""): // 设 置 背 景色 为 蓝 色 
box.style.setProperty("border", "solid 50px red", ""): // 设 置 边 框 为 50 像素 的 红色 实 线 


} 
box.onclick = functionO{ // 定 义 鼠标 单 击 时 的 事件 处 理 函 数 
| box .innerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width")): 
| // 显 示 盒子 的 宽度 
| box .innerHTML = box .innerHTML + "<br>" + (box.style.item(1) + ":" + box.style. getPropertyValue 
| ("height")); // 显 示 盒 子 的 高 度 
| } 
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box.onmouseout = functionO{ // 定 义 鼠 标 移出 时 的 事件 处 理 函 数 

box.style.setProperty("background-color", "red". ""): /设置 背景 色 为 红色 | 

box.style.setProperty("border". "solid 50px blue". ""): /1/ 设 置 50 像素 的 蓝 色 实 边框 | 
| 





} 
</script> | 
<div id="box" style="width:100px: height:100px: background-colorred: border:solid SOpx blue:"></div> 


【示例 5】 针对 示例 4， 下 面 示例 使 用 快捷 方法 设计 相同 的 交互 效果 ， 这 样 能 够 兼容 正 早期 版 | 
本 浏览 器 ， 页 面 代码 如 下 所 示 : | 


<script> | 

window.onload = fnctionO{ | 

Var box = document.getElementById("box"): /获取 盒子 的 引用 | 

box.onmouseover = function0O{ | 

box.style.backgroundColor = "blue"; // 设 置 背 景 样式 | 

box style border = "solid 50px red": // 设 置 边框 样式 | 

) | 
box.onclick = functionO{ // 读 取 并 输出 行内 样式 


box .innerHTML = "width:" + box.style.width; 
box .innerHTML = box .innerHTML + "<br>" + "height:" + box.style.height: 
} 
box.onmouseout = functionO { 1/ 设计 鼠标 移出 之 后 ， 恢 复 默 认 样式 
box.style.backgroundColor = "red": 
box.style.border = "solid 50px blue"; | 
3 
) 
</script> | 
<div id="box" style="width:100px: height:100px: background-colorred: border:solid 50px blue;"></div> 
【拓展 】 
非 正 浏览 器 也 支持 style 快捷 访问 方式 , 但 是 它 无 法 获取 style 对 象 中 指定 
序号 位 置 的 属性 名 称 ， 此 时 可 以 使 用 cssText 属性 读 取 全 部 style 属性 值 ， 借 助 
JavaScript 方法 再 把 返回 字符 串 辟 开 为 数组 。 详 细 内 容 请 扫 码 阅读 。 


20.1.3 使 用 styleSheets 


在 DOM 2 级 样式 规范 中 ，CSSStyleSheet 表示 样式 表 ， 包 括 通过 <link> 标 签 包含 的 外 部 样式 表 和 | 视频 讲解 
在 <style> 标 签 中 定义 的 内 部 样式 表 。 虽然 这 两 个 元 素 分 别 由 HIMLLinkElement 和 HIMLStyleElement | 
类 型 表示 ， 但 是 样式 表 接 口 是 一 致 的 。 | 

CSSStyleSheet 继承 自 StyleSheet。StyleSheet 作为 基础 接口 还 可 以 定义 非 CSS 样式 表 。 
CSSStyleRule 类 型 表示 样式 表 中 每 一 条 规则 ，CSSRule 对 象 是 它 的 实例 。 

使 用 document 对 象 的 styleSheets 属性 可 以 访问 样式 表 , 包括 适应 <style> 标 签 定义 的 内 部 样式 表 ， 
以 及 使 用 <link> 标 签 或 @import 命令 导入 的 外 部 样式 表 。 

styleSheets 对 象 为 每 一 个 样式 表 定义 了 一 个 cssRules 对 象 ,用 来 包含 指定 样式 表 中 所 有 的 规则 ( 样 | 
式 )。 但 是 正 浏览 器 不 支持 cssRules 对 象 ， 而 支持 rules 对 象 表 示 样 式 表 中 的 规则 。 

兼容 主流 浏览 器 的 方法 如 下 : 

Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: 





线 上 阅 
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| 在 上 面 代码 中 先 判断 浏览 器 是 否 支 持 cssRules 对 象 ， 如 果 支 持 则 使 用 cssRules ( 非 正 浏览 器 )， 
| 否则 使 用 mles 〈IE 浏览 器 )。 
| 【示例 1] 在 下 面 示例 中 ,通过 <style> 标 签 定义 一 个 内 部 样式 表 ， 为 页 面 中 的 <div id="box"> 标 签 
县 内 | | 定义 4 个 属性 : 宽度 、 高 度 、 背 景色 和 边框 。 然 后 在 脚本 中 使 用 styleSheets 访问 这 个 内 部 样式 表 ， 把 
人 ”| 样式 表 中 第 一 个 样式 的 所 有 规则 读 取出 来 ， 在 盒子 中 输出 显示 ， 如 图 20.3 所 示 。 
le Vpe"iextless 
| #box { 
width: 400px: 
height: 200px; 
background-color:#BFFBS8F: 
border: solid 1px blue; 


window.onload = functionO{ 
var box = document.getElementById("box"): 
/判断 浏览 器 类 型 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].mules: 
box.innerHTML = "<h3> 盒 子 样式 </h3>" 
// 读 取 cssRules 的 border 属性 
box.innerHTML += "<br> 边 框 : " + cssRules[0].style.border: 
// 读 取 cssRules 的 background-color 属性 
box.innerHTML += "<br> 背 景 : " + cssRules[0].style.backgroundColor; 
// 读 取 cssRules 的 height 属性 
box.innerHTML += "<br> 高 度 : " + cssRules[0].style.height:; 
// 读 取 cssRules 的 width 属性 
box.innerHTML += "<br> 宽 度 : "+ cssRules[0].style.width:; 


</scrip> 


盒 了 样式 
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图 20.3 使 用 styleSheets 访问 内 部 样式 表 


容 提示 : cssRules (或 males ) 的 style 对 象 在 访问 CSS 属性 时 使 用 的 是 CSS 脚本 属性 名 ， 因 此 所 有 
属性 名 称 中 不 能 使 用 连 字符 。 例 如 : 
cssRules[0].style.backgroundColor:; 
这 与 行内 样式 中 的 style 对 象 的 setProperty0) 方 法 不 同 ，setProperty0 方 法 使 用 的 是 CSS 属 
性 名 。 例 如 : 
box.style.setProperty("background-color". "blue" ""): 
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【示例 2】styleSheets 包含 文档 中 所 有 样式 表 ， 每 个 数组 元 素 代 表 一 个 样式 表 ， 数 组 的 索引 位 置 | | 
是 根据 样式 表 在 文档 中 的 位 置 决定 的 。 每 个 <style> 标 签 包含 的 所 有 样式 表示 一 个 内 部 样式 表 , 每 个 独 
立 的 CSS 文件 表示 一 个 外 部 样式 表 。 下 面 示例 演示 如 何 准确 找到 指定 样式 表 中 的 样式 属性 。 

【操作 步骤 】 | yf 

第 1 步 ， 启 动 Dreamweaver， 新 建 CSS 文件 ， 保 存 为 stylel.css， 存 放 在 根 目录 下 。 | 
第 2 步 ， 在 stylel.css 中 输入 下 面 样式 代码 ， 定 义 一 个 外 部 样式 表 。 
@charset “utf-8"; | 
body { color:black: } | 
Pp {color:gray; } 

div { color:white; } 

第 3 步 ， 新 建 HTML 文档 ， 保 存 为 test.html， 保 存在 根 目录 下 。 
第 4 步 ， 使 用 <style> 标 签 定义 一 个 内 部 样式 表 ， 设 计 如 下 样式 。 
<style type="text/css"> 

#box { color:green; } 

Ted { colorred: } 

.blue { colorblue: } 

</style> 

第 5 步 ， 使 用 <link> 标 签 导 入 外 部 样式 表 文 件 stylel.css。 

<link href="stylel.css" rel="stylesheet" type="text/css" media="all" /> 

第 6 步 ， 在 文档 中 插入 一 个 <div id="box"> 标 签 。 

<div id="box"></div> 


第 7 步 , 使 用 <script> 标 签 在 头 部 位 置 插入 一 段 脚 本 。 设 计 在 页 面 初始 化 完毕 后 , 使 用 styleSheets | 
访问 文档 中 的 第 三 个 样式 表 ， 然 后 再 访问 该 样式 表 的 第 一 个 样式 中 的 color 属性 。 | 
<script> | 
window.onload = fonction0{ | 
Var cssRules = document.styleSheets[1].cssRules || document.styleSheets[1].mules: | 

var box = document.getElementById("box"): 
boxinnerHTML = "第 二 个 样式 表 中 第 一 个 样式 的 color 属性 值 =" + cssRules[0].style.color: 





} 

</script> 

第 8 步 ， 保 存 页 面 ， 整 个 文档 的 代码 请 参考 本 节 示 例 源 代码 。 最 后 ， 在 浏览 器 中 预览 页 面 ， 则 可 | 
以 看 到 访问 的 color 属性 值 为 black， 如 图 20.4 所 示 。 


ES Te D - Sc | locslhoct 
第 二 个 样式 表 中 笋 一 个 样式 的 color 属 性 值 =black 





20.4 使 用 styleSheets 访问 外 部 样式 表 
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% 


| 安 提示 : 上 面 示例 中 styleSheets[1] 表 示 外 部 样式 表 文 件 (stylel.css )， 而 cssRules[0] 表 示 外 部 样式 
| 表 文件 中 的 第 一 个 样式 .cssRules[0].style.color 可 以 获取 外 部 样式 表 文件 中 第 一 个 样式 
| 中 的 color 属性 的 声明 值 。 反 之， 如 果 把 <link> 标 签 放置 在 内 部 样式 表 的 上 面 ， 即 代码 
僵 生 | 如 下 : 
| <head> 
<link href="stylel.css" rel="stylesheet" type="text/css" media="all" /> 
| <style type="text/css"> 
#box { color:green: } 
ed { colorred: } 
.blue { colorblue: } 
</style> 
</head> 
上 面 脚本 将 返回 内 部 样式 表 中 第 一 个 样式 中 的 color 属性 值 ， 即 为 green。 如 果 把 外 部 样 
式 表 转 换 为 内 部 样式 表 , 或 者 把 内 部 样式 表 转 换 为 外 部 样式 表 文件 ,不 会 影响 styleSheets 
的 访问 。 因 此 ,样式 表 和 样式 的 索引 位 置 是 不 受 样式 表 类 型 ， 以 及 样式 的 选择 符 限 制 的 。 
任何 类 型 的 样式 表 (不管 是 内 部 的 ， 还 是 外 部 的 ) 都 在 同一 个 平台 上 按 在 文档 中 解析 位 
置 进行 索引 。 同 理 ， 不 同类 型 选择 符 的 样式 在 同一 个 样式 表 中 也 是 根据 先后 位 置 进行 索引 。 


20.1.4 使 用 selectorText 


每 个 CSS 样式 都 包含 selectorText 属性 ， 使 用 该 属性 可 以 获取 样式 的 选择 符 。 
【示例 】 在 下 面 这 个 示例 中 ， 使 用 selectorText 属性 获取 第 1 个 样式 表 (styleSheets[0]) 中 的 第 3 
| 个 样式 (cssRules[2]) 的 选择 符 ， 输 出 显示 为 “.blue”， 如 图 20.5 所 示 。 


<style type="text/css"> 
#box { colorgreen: } 
| Ted { color:red: } 
| .blue { color:blue: } 
| </style> 
<link href="stylel.css" rel="stylesheet" type="text/css" media="all" /> 
<script> 
window.onload = functionO{ 
| Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].mles: 
| Var box = document.getElementById("box"): 
| box.innerHTML = “第 一 个 样式 表 中 第 三 个 样式 选择 符 = "+ cssRules[2].selectorText; 
} 
</script> 
<div id="box"></div> 





Ss Er 
第 一 个 样式 表 中 第 三 个 样式 选择 符 = .blue 





图 20.5 使 用 selectorText 属性 访问 样式 选择 符 
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20.1.5 ”修改 样式 


cssRules 的 style 对 象 不 仅 可 以 访问 属性 ， 还 可 以 设置 属性 值 。 | 
【示例 】 在 下 面 示例 中 ， 样 式 表 中 包含 3 个 样式 ， 其 中 蓝 色 样式 类 〈-blue) 定义 字体 显示 为 | 
蓝 色 。 然 后 利用 脚本 修改 该 样式 类 〈.blue 规则 ) 字体 颜色 显示 为 浅 灰 色 (#999)， 最 后 显示 效果 | 全 一 
如 图 20.6 所 示 。 vote 
| 


<style type="text/css"> | 

#box { color:green; } | 

.Ted { colorred: } | 

.blue { colorblue: } 

</style> 

<script> | 

window.onload = functionO{ | 
Var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules: | 

cssRules[2].style.color="#999"; // 收 改 样式 表 中 指定 属性 的 值 











} 
</scrip> 
<p class="blue"> 原 为 蓝 色 字体 ， 现 在 显示 为 浅 灰 色 。</p> 


LE TI P - Sc | Slocahos: 





图 20.6 修改 样式 表 中 的 样式 


容 提示: 上 述 方法 修改 样式 表 中 的 类 样式 ， 会 影响 其 他 对 象 或 其 他 文档 对 当前 样式 表 的 引用 ， 因 此 | 
在 使 用 时 请 务必 谨慎 。 | 


20.1.6 ”添加 样式 


使 用 addRule0 方 法 可 以 为 样式 表 增加 一 个 样式 。 具 体 用 法 如 下 : 

styleSheet.addRule(selector.style.[index]) 

styleSheet 表示 样式 表 引 用 ， 参 数 说 明 如 下 : 

selector: 表示 样式 选择 符 ， 以 字符 串 的 形式 传递 。 

style: 表示 具体 的 声明 ， 以 字符 串 的 形式 传递 。 | 

index: 表示 一 个 索引 号 ， 表 示 添 加 样式 在 样式 表 中 的 索引 位 置 ， 默 认 值 为 -1， 表 示 位 于 样 | 
式 表 的 末尾 ， 该 参数 可 以 不 设置 。 | 

Firefox 浏览 器 不 支持 addRule0 方 法 ， 但 是 支持 使 用 insertRule0 方 法 添加 样式 。insertRule0 方 法 | 

的 用 法 如 下 : | 
styleSheet.insertRule(mle,[index]) 

| 

参数 说 明 如 下 : | 
rule: 表示 一 个 完整 的 样式 字符 串 。 ks 
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index: 与 addRule() 方 法 中 的 index 参数 作用 相同 ， 但 默认 值 为 0， 放置 在 样式 表 的 末尾 。 
| 【示例 】 在 下 面 示例 中 ， 先 在 文档 中 定义 一 个 内 部 样式 表 ， 然后 使 用 styleSheets 集合 获取 当前 样 
| 式 表 ， 利 用 数组 默认 属性 length 获取 样式 表 中 包含 的 样式 个 数 。 最 后 在 脚本 中 使 用 addRuleO (或 
全 | insertRule0) 方法 增加 一 个 新 样式 ， 样 式 选择 符 为 p， 样 式 声明 为 背景 色 为 红色 ， 字 体 颜色 为 白色 ， 
~ 段落 内 部 补 白 为 一 个 字体 大 小 。 
保存 页 面 ， 在 浏览 器 中 预览 ， 显 示 效 果 如 图 20.7 所 示 。 
| <style type="text/css"> 
#box { color:green: } 
‘Ted { color:red: } 
‘blue { color:blue: } 
</style> 
<scrip> 
window.onload = functionO{ 
Var styleSheets = document.styleSheets[0]; 。 /获取 样式 表 引 用 


var index = styleSheets.length; // 获 取样 式 表 中 包含 样式 的 个 数 
iftstyleSheets.insertRule) { // 判 断 浏览 器 是 否 支持 insertRule0 方 法 
| styleSheets.insertRule("p {background-color:red:color:-#fff:padding: lem:}", index); 
| jelse{ // 如 果 不 支持 insertRule0 方 法 
| styleSheets.addRule("P", "background-colorred:color#ftfpadding:lem:", index): 
| } 
| 
| </script> 
| <p> 在 样式 表 中 增加 样式 操作 </p> 
| 
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图 20.7 为 段落 文本 增加 样式 
在 上 面 代码 中 ， 使 用 insertRule0 方 法 在 内 部 样式 表 中 增加 一 个 <p> 标 签 选择 符 的 样式 ， 插 入 位 置 
| 在 样式 表 的 末尾 。 设 置 段落 背景 色 为 红色 ， 字 体 颜 色 为 白色 ， 补 白 为 一 个 字体 大 小 。 
20.1.7 ”访问 泻 染 样式 


CSS 样式 具有 重 硅 性， 这 导致 同一 个 对 象 被 定义 了 多 个 样式 后 部 分 样式 被 覆盖 ， 最 终 泻 染 效果 仅 
采用 了 部 分 样式 。 





视频 讲解 
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DOM 定义 了 一 个 方法 帮助 用 户 快速 检测 当前 对 象 的 最 后 显示 样式 , 不 过 正 和 标准 DOM 之 间 实 
现 的 方法 不 同 。 








1. 了 IE 浏览 器 
正 浏览 器 定义 了 一 个 curentStyle 对 象 ， 该 对 象 是 一 个 只 读 对 象 。currentStyle 对 象 包含 了 文档 内 | 
所 有 元 素 的 style 对 象 定义 的 属性 ， 以 及 任何 未 被 覆盖 的 CSS 规则 的 style 属性 。 | 
【示例 1】 针对 上 节 示例 ， 把 类 样式 blue 增加 了 一 个 背景 色 为 白色 的 声明 ， 然 后 把 该 类 样式 应 用 


到 段落 文本 中 。 | 


<style type="text/css"> 
#box { color:green; } 
Ted { color:red: } 
.blue {color:blue; background-color:#FFFFFF:} 
</style> 
<script> 
window.onload = functionO{ 
var styleSheets = document.styleSheets[0]: 。“// 获 取样 式 表 引 用 


var index = styleSheetslength: // 获 取样 式 表 中 包含 样式 的 个 数 
if(styleSheets.insertRule) { // 判 断 浏览 器 是 否 支持 insertRule0 方 法 
styleSheets.insertRule("p {background-color:red:color:#fff:padding: lem:}", index); 


styleSheets.addRule("P". "background-color:red:color:#fff:.padding: lem:". index): 
} 
} 


</script> 
<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 


在 浏览 器 中 预览 ， 会 发 现 脚本 中 使 用 insertRuleO (或 addRule0 ) 方法 添加 的 样式 无 效 ， 效 果 如 | 
图 20.8 所 示 。 | 


| 
| 
| 
| 
| 
| 
jE // 如 果 浏览 器 不 支持 insertRule0 方 法 | 
| 
| 
| 
| 
| 
| 
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| 
1 
在 样式 表 中 塔 加 样式 梁 作 | 
| 
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20.8 背景 样式 重 秋 后 的 效果 | 

使 用 currentStyle 对 象 获取 当前 p 元 素 最 终 显示 样式 ， 这 样 就 可 以 找到 添加 样式 失效 的 原因 。 ”| 

【示例 2】 把 上 面 示例 另存 为 testLhtml， 然 后 在 脚本 中 添加 代码 ， 使 用 currentStyle 获取 当前 段 

落 标签 <p> 的 最 终 显示 样式 ， 显 示 效果 如 图 20.9 所 示 。 

<script> | 
window.onload = functionO{ LL 
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| var styleSheets = document styleSheets[0]: /获取 样式 表 引 用 
| var index = styleSheetslength: // 获 取样 式 表 中 包含 样式 的 个 数 
| if(styleSheets.insertRule){ /判断 是 否 支 持 insertRule0， 支 持 则 调用 ， 否 则 调用 addRule 
pe styleSheets.insertRule("p {backeground-color:red:color-#fff:padding: lem:}". index); 
Aa }else{ 
又 styleSheets.addRule("P". "background-color:red:color-#fff:padding: lem:", index): 


} 
Varp = document. Ee ame("p")[0]: 
| pinnerHTML = " 背 景 色 : "+p.currentStyle.backgroundColor+"<br> 字 体 颜色 : "+p.currentStyle.color 


| 
| 
| 
| Ke Shap/ocalhostim P= S| S localhost 
| 
| 


背景 色 : #fffffF 


字体 颜色 : blue 





图 20.9 在 正 浏 览 器 中 获取 标签 <p> 的 显示 样式 


在 上 面 代码 中 ， 先 使 用 getElementsByTagName() 方 法 获取 段落 文本 的 引用 。 然 后 调用 该 对 象 的 
currentStyle 子 对 象 ， 并 获取 指定 属性 的 对 应 值 。 通 过 这 种 方式 ， 会 发 现 添加 的 样式 被 blue 类 样式 覆 
盖 ， 这 是 因为 类 选择 符 的 优先 级 大 于 标签 选择 符 的 样式 。 

2. 非 正 浏览 器 


DOM 定义 了 一 个 getComputedStyle() 方 法 ， 该 方法 可 以 获取 目标 对 象 的 最 终 显示 样式 ， 但 是 它 需 
要 使 用 document.defaultView 对 象 进行 访问 。 

getComputedStyle0 方 法 包含 了 两 个 参数 : 第 一 个 参数 表示 元 素 ， 用 来 获取 样式 的 对 象 ; 第 二 个 参 
| 数 表示 伪 类 字符 串 ， 定 义 显 示 位置 ， 一 般 可 以 省 略 ， 或 者 设置 为 null。 
| 【示例 3】 针 对 上 面 示例 ， 为 了 能 够 兼容 非 正 浏览 器 ， 下 面 对 页 面 脚 本 进行 修改 。 使 用 站 语句 
| 判断 当前 浏览 器 是 否 支 持 document.defaultView， 如 果 支 持 则 进一步 判断 是 否 支 持 document. 
| defaultView.getComputedStyle， 如 果 支 持 则 使 用 getComputedStyle( 方 法 读 取 最 终 显示 样式 ; 否则 ， 判 
| 断 当 前 浏览 器 是 否 支持 currentStyle， 如 果 支 持 则 使 用 它 读 取 最 终 显示 样式 。 
| le ype"textess'> 
| #box { color:green: } 
| Ted { color:red: } 
| 
| 
| 
下 


.blue {color:blue: backeround-color-#FFFFFF:} 
</style> 
<script> 
window.onload = function0{ 
var styleSheets = document styleSheets[0]: // 获 取样 式 表 引用 指针 
var index = styleSheets.length: // 获 取样 式 表 中 包含 样式 的 个 数 
| if(styleSheets.insertRule){ 1/ 判断 浏览 器 是 否 支 持 
| styleSheets.insertRule("p{background-color:red:color:-#fff:padding: lem:}". index): 
| Jelse{ 
| styleSheets.addRule("P". "background-color:red:color-#fff:padding: lem:". index): 
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Varp= oe 





p.innerHTML = "当前 浏览 器 无 法 获取 最 终 显示 样式 "; | 
) 


</script> 
<p class="blue"> 在 样式 表 中 增加 样式 操作 </p> 
保存 页 面 ， 在 Firefox 浏览 器 中 预览 ， 显 示 效 果 如 图 20.10 所 示 。 


| 

| 

| 

httpy/localnost...ysita/test2.html | 
向 localhor/mycie/er2hm 辐 器“C|| 苞 - + | 
| 

| 

| 


背景 色 : rgb(255, 255, 255) 


字体 颜色 : rgb(0, 0, 255) 





20.10 ”在 Firefox 浏览 器 中 获取 标签 <p> 的 显示 样式 


20.2 案例 实战 





下 面 通过 示例 演示 如 何 使 用 JavaSeript+CSS 设计 页 面 特效 效果 。 
20.2.1 设计 网 页 换 肤 


网 页 换 肤 技术 实际 上 就 是 多 个 外 部 样式 表 的 动态 更 换 。 为 了 方便 练习 ， 本 例 以 模板 页 效果 呈现 ， 
如 图 20.11 一 图 20.13 所 示 。 在 页 面 右上 角 定 义 了 3 个 模拟 按钮 ， 单 击 这 些 按钮 可 以 使 页 面 呈现 不 同 | 
的 显示 效果 。 
设计 思路 : 使 用 JavaScript 脚本 动态 导入 外 部 样式 表 文件 。 | 








20.11 网 页 皮肤 演示 效果 1 图 20.12 网 页 皮肤 演示 效果 2 
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20.13 ”网 页 皮肤 演示 效果 3 


【操作 步骤 】 
第 1 步 ， 启 动 Dreamweaver， 新 建文 档 ， 保 存 为 test1.html。 设 计 一 个 简单 的 页 面 宏观 结构 (三 级 
霸 套 )。 页 面 结构 包含 3 部 分 : 页 头 区 域 (<div id="header">)、 主 体 结构 (<div id="main"> ) 和 页 眉 
区 域 (<div id="footer"> )。 在 页 头 区 域 包 含 了 3 个 皮肤 提示 标签 〈 使 用 <span> 标 签 设计 )。 
| <div id="wrapper"> 
<div id="header"> 
| <h1> 页 头 </hl> 
| <p><span title=" 皮 肤 1”class="btn1"> 皮 肤 1</span><span title=" 皮 肤 2" class="btm2"> 皮 肤 
2</span><span title=" 皮 肤 3" class="btn3"> 皮 肤 3</span></p> 
</div> 
<div id="main"> 
<div id="leftcolumn"> 左 侧 栏 </div> 
<div id="rightcolumn"> 右 侧 栏 <div> 
</div> 
<div id="footer"> 页 脚 </div> 
</div> 
第 2 步 ， 以 该 结构 为 基础 设计 3 个 样式 表 (test1(0).css、test1(1).css、test1(2).css)， 这 些 样 式 表 的 
具体 设计 效果 如 图 20.9 一 图 20.11 所 示 ， 详 细 代码 请 查看 本 节 示 例 源 代码 。 
第 3 步 , 在 默认 状态 下 导入 testl(0).css 样式 表 文件 , 设计 页 面 默认 皮肤 效果 。 此 时 必须 使 用 <link> 
| 标签 导入 外 部 样式 表 文 件 ， 不 再 建议 使 用 “@import url("test1(1).css");” 命 令 导 入 外 部 样式 表 ， 因 为 
| 它 不 方便 使 用 脚本 控制 。 
<link href="test1(0).css" rel="stylesheet" type="text/css" media= "all" /> 


第 4 步 ， 使 用 CSS 模拟 皮肤 切换 按钮 ， 共 体 代码 如 下 : 





<style type="text/css"> 


headerp { text-align:right: } 让 右 对 齐 皮肤 切换 按钮 */ 

| #header p span { 上 # 皮肤 标签 样式 */ 

| margin-right:8px: 上 庆 定义 按钮 之 间 的 边 距 */ 

| cursor:pointer; 语 鼠标 指针 经 过 显示 为 手 形 */ 

| padding:25px 37px 25px 38px: 让 增加 补 白 ， 以 实现 完整 显示 背景 图 像 */ 

| border:solid 1px: 上 # 增加 1 像素 宽度 的 实 线 */ 
border-color#fFF#666 #666 HE 上 # 通过 边框 颜色 的 明暗 设计 立体 效果 */ 

| font-size:0: 上 # 字体 大 小 为 0， 不 显示 标签 内 包含 的 文本 */ 

| line-height:0: 让 隐藏 行 高 ， 兼 容 正 浏览 器 */ 

| text-indent:-999px: 上 # 隐藏 文本 ， 兼 容 Opera 浏览 器 */ 

| Zoom:1: 人 # 启动 布局 功能 ， 兼 容 正 浏览 器 显示 边框 */ 
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} 
#header .btn1 { background:green url(images/btn1.gif) no-repeat center; }/* 背景 图 像 1 */ 
#header .btn2 { background:green url(images/btn?2.gif) no-repeat center: }/* 背景 图 像 2*/ 
#header .btn3 { background:green url(images/btn3.gif) no-repeat center; }/* 背景 图 像 3*/ 
</style> | 
第 5 步 , 兼容 下 6 及 其 以 下 版 本 浏览 器 ,主要 问题 是 IE6 及 其 以 下 版 本 浏览 器 无 法 正常 撑 开 span | 
行内 元 素 ， 通 过 给 行内 元 素 定义 1 像素 的 宽度 来 触发 它 能 够 自动 展开 。 详 细 代码 如 下 : 
* html #headerp span {/* 该 选择 器 仅 在 正 6 及 其 以 下 版 本 浏览 器 中 执行 */ | 





padding:25px 36px 25px 38px: /* 右 侧 补 白 缩小 一 个 像素 */ | 
width: 1px; 店 定义 1 像素 宽度 ， 促 使 span 元 素 张 开 */ | 
color:#fPF 局 白色 字体 ， 隐 藏 小 黑 点 〈 与 背景 色 重合 ) #/ 


} 
第 6 步 ， 设 计 脚本 控制 程序 ， 并 为 3 个 皮肤 标签 绑 定 事件 处 理 函数 。 详 细 代 码 如 下 : 


<scrip> 
window.onload = functionO{ /页 面 加 载 完毕 时 执行 的 事件 处 理 函 数 
varlink = document.getElementsByTagName("link")[0]: /获取 <link> 标 签 的 引用 
/获取 头 部 区 域内 的 span 元 素 的 引用 集合 
Var Span = document.getElementById("header").getElementsByTagName("span"): 
span[0].onclick = function0{ /为 第 1 个 <span> 标 签 绑 定 鼠 标 单 击 时 的 事件 处 理 函 数 
link.href= "test1(0).css"; /为 <link> 标 签 的 href 属性 设置 URL 〈 外 部 样式 表 文件 ) 


span[1].onclick = function0{ /为 第 2 个 <span> 标 签 绑 定 鼠 标 单 击 时 的 事件 处 理 函数 
linkhref= "test1(1).css"; /为 <link> 标 签 的 href 属性 设置 URL (外 部 样式 表 文件 ) 


} 
span[2].onclick = functionO{ // 为 第 3 个 <span> 标 签 绑 定 鼠标 单 击 时 的 事件 处 理 函 数 
link href = "test1(2).css"; // 为 <link> 标 签 的 href 属性 设置 URL (外 部 样式 表 文 件 ) 
} 
} 
</script> 


20.2.2 ”设计 折 又 面板 


折 半 面板 主要 利用 CSS 的 display 属性 ， 借 
板 演示 效果 如 图 20.14 和 图 20.15 所 示 。 


€ :EECITEEI EYE 有 * 


人 








图 20.14 展开 面板 效果 


图 20.15 折 起 面板 效果 
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第 1 步 ， 启动 Dreamweaver， 新 建文 档 , 保存 为 test.html, 构建 HTML 结构 。 结 构 没有 特殊 要 求 ， 


使 用 任何 两 个 标签 均 可 实现 折 羞 效果， 但 是 从 语义 角度 来 考虑 ， 使 用 定义 列表 是 最 佳 语 义 结构 选择 。 


会 内 ”元 素 负责 构建 折 肥 面板 的 外 框 ，dt 元 素 负责 构建 折 著 面板 的 标题 栏 ， 而 dd 元 素 负责 构建 面板 主体 
NA | 包含 框 。 
Note <d> 
| <d> 标 题 </dt> 


<dd> 折 又 区 域 <img src="images/3.jpg" width="300" /></dd> 


</d> 


第 2 步 ， 在 设计 折 半 行为 之 前 ， 先 假设 这 是 一 个 普通 的 列表 结构 ， 然 后 使 用 CSS 来 控制 定义 列 


<style type="text/css"> 
dl {/* 定义 列表 框 样式 */ 


width:400px: 必 定义 折 奴 面 板 的 宽度 ， 可 自 定义 记 
border:solid 1px #ccc: 局 边框 ， 可 自 定义 */ 
font-size:12px: /# 字体 大 小 ， 可 自 定义 */} 


dt {/* 列表 标题 样式 */ 
:#7FECAD url(images/green. gif) repeat-x: 
color:#71790C: 


证 定义 渐变 标题 背景 */ 
证 字体 颜色 ， 可 自 定义 */ 


第 3 步 ， 在 上 面 样式 表 的 基础 上 定义 两 个 类 样式 ， 分 别 用 来 隐藏 和 显示 对 象 。 


| height:28px; /#* 标题 高 度 */ 

| line-height:28px: 店 行 高 ， 间 接 实 现 垂直 对 齐 */ 
| padding-left: lem; 上 # 增加 左 侧 空隙 */ 

| border-bottom:solid 1px #efefef: /* 底部 边框 样式 */ 

| cursorpointer: /#* 鼠标 指针 为 手 形 */} 
| dd {/* 列表 项 样式 */ 

| padding:2px 4px: 语 增加 内 容 框 内 边 距 */ 
| margin:0: 让 清除 缩 进 */} 

| </style> 

| 

| 


.expand { overflow:visible: } /# 展开 面板 时 ， 显 示 所 有 内 容 区 域 */ 


| collapse { 放 折 芝 面板 时 ， 仅 显示 标题 区 域 */ 

| height:28px: 此 限制 列表 包含 框 的 高 度 ， 使 其 等 于 标题 栏 的 高 度 */ 

| overflow:hidden: 片 强制 隐藏 多 出 的 区 域 */} 

| 第 4 步 ， 完 成 结构 层 和 表现 层 的 设计 ， 下 面 就 来 设计 交互 层 。 在 JavaScript 脚本 中 定义 一 个 函数 
| Switch0 用 作 展开 和 折 全 的 开关 。 

”function Switch(dD{ // 折 芭 控 制 函 数 

| var dl = dtparentNode: // 获 取 标题 栏 的 父 包 含 框 

| 这 dlclassName 一 "collapse")dl.className = "expand": ”// 如 果 折 又 ， 则 调用 展开 类 样式 

| else dl.className = "collapse": // 相 反 则 调用 折 又 类 样式 


第 5 步 ， 完 成 脚本 函数 的 设计 ， 然 后 把 它 绑 定 到 标题 栏 的 onclick 事件 属性 上 面 ， 代 码 如 下 : 
<dt onclick="Switch(this)"> 标 题 </dt> 


这 里 使 用 this 关键 字 作 为 参数 进行 传递 ， 它 代表 当前 dt 元 素 的 引用 。 至 此 ， 整 个 折 关 面板 的 设 
」 计 就 完成 了 。 
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&y 
20.2.3 ”设计 工具 提示 


Tooltip〈 工 具 提 示 ) 是 一 种 比较 实用 的 JavaScript 应 用 。 当 为 一 个 元 素 (一般 为 
超 链接 a 元 素 ) 定义 title 属性 时 ， 会 在 鼠标 经 过 时 显示 提示 信息 ， 这 些 提 示 能 够 详细 全 
描绘 经 过 对 象 的 包含 信息 ， 这 对 于 超 链接 (特别 是 图 像 式 超 链接 ) 非常 有 用 。 a 全 
详细 说 明和 操作 步骤 请 扫 码 阅读 。 线 上 阅读 


20.3 在 线 练 习 





CSS 脚本 样式 练习 。 
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使 用 Ajax 


Ajax ( Asynchronous JavaScript and XML， 异 步 JavaScript 和 XML ) 是 利用 JavaScript 脚本 
实现 客户 端 与 服务 器 端 进行 异步 通信 的 一 种 方法 。Ajax 通信 主要 由 下 面 技术 协同 完成 


dl 
dl 
dl 
dl 
dl 


基于 标准 的 HTML 结构 和 CSS 样式 

通过 DOM 实现 动态 显示 和 交互 

通过 XML 等 进行 数据 交换 和 处 理 

使 用 XMLHttpRequest 插件 进行 异步 通信 

使 用 JavaScript 实施 逻辑 控制 ， 以 便 整 合 以 上 所 有 技术 


本 章 将 讲解 Ajax 的 基本 用 法 ， 代 码 测试 环境 为 : IIS ( 服务 器 ) +ASP ( 脚本 ) +Access ( 数 
据 库 )， 因 为 Windows 操作 系统 默认 包含 了 这 些 技术 ， 读 者 只 需要 简单 操作 就 可 以 快速 搭建 一 
个 本 地 虚拟 服务 器 环境 。 


【学 习 要 点 】 

WI 了 解 Ajax 基础 知识 。 

WI 正确 使 用 XMLHttpRequest。 

WI 能够 设计 简单 的 异步 通信 代码 。 








21.1 使 用 XMLHttpRequest | 


XMLHttpRequest 是 一 个 API， 它 为 客户 端 提供 了 在 客户 端 和 服务 器 端 
之 间 传 输 数据 的 功能 。 它 提供 了 一 个 通过 URL 来 获取 数据 的 简单 方式 ， 
并 且 不 会 使 整个 页 面 刷新 。 这 使 得 网 页 只 更 新 一 部 分 页 面 而 不 会 打扰 到 用 户 。 
XMLHttpRequest 在 Ajax 中 被 大 量 使 用 。 

所 有 标准 浏览 器 都 支持 XMLHttpRequest API， 如 IE7+、Firefox、 
Chrome、Safari 和 Opera。 通 过 一 行 简单 的 JavaSeript 代码 ， 就 可 以 创建 
XMLHttpRequest 对 象 。 借 助 XMLHttpRequest 对 象 的 属性 和 方法 ， 就 可 以 斤 上 阅 按 | 
实现 异步 通信 功能 ， 具 体 属性 和 方法 说 明 请 扫 码 了 解 。 | 

| 


21.1.1 定义 XMLHttpRequest 对 象 


使 用 XMLHttpRequest 对 象 实现 异步 通信 一 般 需 要 下 面 几 个 步骤 。 
第 1 步 ， 定 义 XMLHttpRequest 对 象 。 
第 2 步 ， 调 用 XMLHttpRequest 对 象 的 open0 方 法 打开 服务 器 端 URL 地 址 。 
第 3 步 ， 注 册 onreadystatechange 事件 处 理 函 数 ， 准 备 接收 响应 数据 ， 并 进行 处 理 。 
第 4 步 ， 调 用 XMLHttpRequest 对 象 的 send0 方 法 发 送 请 求 。 
现代 标准 浏览 器 都 支持 XMLHttpRequest API，IE 从 5.0 版 本 开始 就 以 ActiveX 组 件 形式 支持 
XMLHttpRequest， 在 IE 7.0 版 本 中 标准 化 XMLHttpRequest， 人 允许 通过 window 对 象 进行 访问 。 不 过 ， 
所 有 浏览 器 的 XMLHttpRequest 对 象 都 提供 了 相同 的 属性 和 方法 。 | 
【示例 】 下 面 函 数 采用 一 种 更 高 效 的 工厂 模式 把 定义 XMLHttpRequest 对 象 功能 进行 封装 ， 这 样 | 
只 要 调用 createXMLHTTPObject0 方 法 就 可 以 返回 一 个 XMLHttpRequest 对 象 。 | 
// 定 义 XMLHttpRequest 对 象 | 
// 参 数 : 无 | 
/返回 值 :， XMLHttpRequest 对 象 实例 | 
function createXMLHTTPObjectO{ 
var XMLHttpFactories = [/ 兼 容 不 同 浏览 器 和 版 本 的 创建 函数 数组 
function O {return new XMLHttpRequestO}、 | 
function | {return new ActiveXObject("Msxml2.XMLHTTP")}. | 
function () fretum new ActiveXObject("Msxml3.XMLHTTP")}. | 
function | {retum new ActiveXObject("Microsoft. XMLHTTP")}. | 








上 

var xmlhttp = false: 

for (var i= 0:; i < XMLHttpFactories.length: i++ ){ | 

/尝试 调用 匿名 函数 ， 如 果 成 功 则 返回 XMLHttpRequest 对 象 ， 否 则 继续 调用 下 一 个 | 
| 


ty{ | 

xmlhttp = XMLHttpFactories[i]O: | 

}catch (Of | 

continue: // 如 果 发 生 异 常 ， 则 继续 下 一 个 函数 调用 | 

} | 

break: // 如 果 成 功 ， 则 中 止 循环 | 
\ 


. 455 。 


RE ae 从 入 门 到 精通 ( 微 课 精 编 版 ) 


于 
rr // 返 回 对 象 实例 
| 


上 面 函 数 首先 创建 一 个 数组 ， 数 组 元 素 为 各 种 创建 XMLHttpRequest 对 象 的 匿名 函数 。 第 一 个 元 
| 素 是 创建 一 个 本 地 对 象 ， 而 其 他 元 素 将 针对 正 浏览 器 的 不 同 版 本 尝试 创建 ActiveX 对 象 。 然 后 设置 
变量 xmlhttp 为 false， 表 示 不 支持 Ajax。 接 着 遍历 工厂 内 所 有 函数 并 尝试 执行 它们 ， 为 了 避免 发 生 异 
| 常 , 把 所 有 调用 函数 放 在 try 子 句 中 执行 , 如 果 发 生 错误 , 则 在 catch 子 句 中 捕获 异常 , 并 执行 continue 
| 命令， 返回 继续 执行 ， 而 不 是 抛 出 异常 。 如 果 创建 成 功 ， 则 中 止 循环 ， 返 回 创建 的 XMLHttpRequest 
| 对 象 实例 。 


21.1.2 建立 XMLHttpRequest 连接 


创建 XMLHttpRequest 对 象 之 后 ， 就 可 以 使 用 XMLHttpRequest 的 open0 方 法 建立 一 个 HTTP 请 
求 。open0 方 法 的 用 法 如 下 所 示 。 

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync. bstrUser bstrPassword): 

该 方法 包含 5 个 参数 ， 其 中 前 两 个 参数 是 必需 的 。 简 单 说 明 如 下 。 

bstrMethod: HTTP 方法 字符 串 ， 如 POST、GET 等 ， 大 小 写 不 敏感 。 

回 bstrUrl: 请 求 的 URL 地 址 字符 串 ， 可 以 为 绝对 地 址 或 相对 地 址 。 

回 varAsync: 布尔 值 ， 可 选 参数 ， 指 定 请 求 是 否 为 异步 方式 ， 默 认为 tue。 如 果 为 真 ， 当 状态 

改变 时 会 调用 onreadystatechange 属性 指定 的 回调 函数 。 
回 bstrUser: 可 选 参数 ， 如 果 服 务 器 需要 验证 ， 该 参数 指定 用 户 名 ， 如 果 未 指定 ， 当 服务 器 需 
要 验证 时 会 弹出 验证 窗口 。 

回 “bstrPassword: 可 选 参数 ， 验 证 信息 中 的 密码 部 分 ， 如 果 用 户 名 为 空 ， 则 此 值 将 被 忽略 。 

然后 ， 使 用 XMLHttpRequest 的 send0 方 法 发 送 请 求 到 服务 器 端 ， 并 接收 服务 器 的 响应 。send() 
方法 的 用 法 如 下 所 示 。 

XMLHttpRequest.send(varBody): 

参数 varBody 表示 将 通过 该 请 求 发 送 的 数据 ， 如 果 不 传递 信息 ， 可 以 设置 参数 为 null。 

该 方法 的 同步 或 异步 方式 取决 于 open 方法 中 的 bAsync 参数 ， 如果 bAsync 一 False， 此 方法 将 会 
等 待 请 求 完 成 或 者 超时 时 才 会 返回 ， 如 果 bAsync 一 True， 此 方法 将 立即 返回 。 

使 用 XMLHttpRequest 对 象 的 responseBody、responseStream、responseText 或 responseXML 属性 
| 可 以 接收 响应 数据 。 
| 【示例 】 下 面 示例 简单 演示 了 如 何 实现 异步 通信 方法 ， 代 码 省 略 了 定义 XMLHttpRequest 对 象 的 





四 


| 画 数 。 
| XmlHttp.open("GET","serverasp", false): 
| xmlHttp.send(null): 
alert(xmlHttp.responseText): 


在 服务 器 端 文件 〈serverasp) 中 输入 下 面 的 字符 串 。 
Hello World 


在 浏览 器 中 预览 客户 端 交互 页 面 就 会 弹出 一 个 提示 对 话 框 ， 显 示 “Hello World” 的 提示 信息 。 该 
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字符 串 是 借助 XMLHttpRequest 对 象 建立 的 连接 通道 ， 从 服务 器 端 响应 的 字符 串 。 
21.1.3 发送 GET 请 求 


发 送 GET 请 求 时 ,只 需 将 包含 查询 字符 串 的 URL 传 入 open() 方 法 ,设置 第 一 个 参数 值 为 “GET” | 
即 可 。 服 务 器 能 够 在 URL 尾部 的 查询 字符 串 中 接收 用 户 传递 过 来 的 信息 。 | 
使 用 GET 请 求 较 简单 ， 比 较 方便 ， 它 适合 传递 简单 的 信息 ， 不 易 传 输 大 容量 或 加 密 数 据 。 
【示例 】 下 面 示例 在 页 面 (main.html〉 中 定义 一 个 请 求 连接 ， 并 以 GET 方式 传递 一 个 参数 信息 : | 
callback=functionName。 





<script> 

/省略 定 义 XMLHttpRequest 对 象 函数 

function requesturD{ // 请 求 函数 | 
xmlHttp.open("GET".url, false); // 以 GET 方式 打开 请 求 连接 | 
xmlHttp.send(null): // 发 送 请 求 | 
alert(xmlHttp.responseText); /获取 响应 的 文本 字符 串 信息 

} 

window.onload = functionO{ // 页 面 初始 化 


var b = document.getElementsByTagName("input")[0]; | 
b.onclick = function|){ | 
var url = "server.asp?callback=functionName" | 
// 设 置 向 服务 器 端 发 送 请 求 的 文件 ， 以 及 传递 的 参数 信息 
request(url): // 调 用 请 求 函数 
} 
} 
</script> 
<hl>Ajax 异步 数据 传输 </hl> 
<input name="submit"type="button" id="submit"value=" 向 服务 器 发 出 请 求 " /> 
在 服务 器 端 文件 (server.asp) 中 输入 下 面 的 代码 ， 获 取 查 询 字符 串 中 callback 的 参数 值 ， 并 把 该 
值 响应 给 客户 端 。 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 
<% 
callback = Request.QueryString("callback") 
Response. Write(callback) 
%> 


在 浏览 器 中 预览 页 面 ， 当 单 击 提交 按钮 时 会 弹出 一 个 提示 对 话 框 ， 显 示 传递 的 参数 值 。 


深 提示 : 查询 字符 囊 通过 问号 (?) 前 级 附加 在 URL 的 末尾 ， 发 送 数据 是 以 连 字符 ( &) 连接 的 一 | 
个 或 多 个 名 / 值 对 。 每 个 名 称 和 值 都 必须 在 编码 后 才能 用 在 URL 中 ， 用 户 使 用 JavaScript 
的 encodeURIComponentO 函数 对 其 进行 编码 ， 服 务 器 端 在 接收 这 些 数据 时 也 必须 使 用 
decodeURIComponentO 函 数 进行 解码 。URL 最 大 长 度 为 2048 字符 (2KB )。 


21.1.4 发 送 POST 请 求 


POST 请 求 支持 发 送 任意 格式 、 任 意 长 度 的 数据 ， 一 般 多 用 于 表单 提交 。 与 GET 发 送 的 数据 格式 | 
相似 ，POST 发 送 的 数据 也 必须 进行 编码 ， 并 用 连 字符 〈&) 进行 分 喇 ， 格 式 如 下 : | 
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send("namel=valuel &name2=value2..."): 

在 发 送 POST 请 求 时 ， 参 数 不 会 被 附加 到 URL 的 末尾 ， 而 是 作为 send0 方 法 的 参数 进行 传递 。 
【示例 1】 以 21.1.3 节 示 例 为 例 ， 使 用 POST 方法 向 服务 器 传递 数据 ， 定 义 如 下 请 求 函数 。 

function request(urD){ 


} 


XmlHttp.open("POST".url false); 
xmlHttp.setRequestHeader('‘Content-type','application/x-www-form-urlencoded'):; 
/设置 发 送 数 据 类 型 

xmlHttp.send("callback=functionName"); 

alert(xmlHttp.response Text); 


| 在 open0 方 法 中 设置 第 一 个 参数 为 POST， 然 后 使 用 setRequestHeader0 方 法 设置 请 求 消息 的 内 容 
| 类 型 为 “application/x-www-form-urlencoded”， 它 表示 传递 的 是 表单 值 ， 一 般 使 用 POST 发 送 请 求 时 
| 都 必须 设置 该 选项 ， 否 则 服务 器 会 无 法 识别 传递 过 来 的 数据 。 


总 提示 : setRequestHeader() 方 法 的 用 法 如 下 : 


xmlhttp.setRequestHeader("Header-name", "value"); 

一 般 设置 头 部 信息 中 User-Agent 首部 为 XMLHTTP， 以 便于 服务 端 器 能 够 辨别 出 
XMLHttpRequest 异步 请 求 和 其 他 客户 端 普通 请 求 。 

xmlhttp.setRequestHeader("User-Agent", "XMLHTTP"); 

这 样 就 可 以 在 服务 器 端 编写 脚本 分 别 为 标准 浏览 器 和 不 支持 JavaScript 的 浏览 器 呈现 不 同 
文档 ， 以 提高 可 访问 性 的 手段 。 

如 果 使 用 POST 方法 传递 数据 ， 还 必须 设置 另 一 个 头 部 信息 。 
Xmlhttp.setRequestHeader("Content-type ", " application/ 

X-WWWwW-form-urlencoded "); 


| 然后 ， 在 send0 方 法 中 附加 要 传递 的 值 ， 该 值 是 一 个 或 多 个 “名 / 值 ”对 ， 多 个 “名 / 值 ”对 之 间 
| 使 用 “&” 分 隔 符 进行 分 隔 。 在 “名 / 值 ”对 中 ,“ 名 ”可 以 为 表单 域 的 名 称 与 表单 域 相对 应 ),“ 值 ” 











可 以 是 固定 的 值 ， 也 可 以 是 一 个 变量 。 
设置 第 三 个 参数 值 为 false， 关 闭 异 步 通信 。 
最 后 ， 在 服务 器 端 设 计 接收 POST 方式 传递 的 数据 ， 并 进行 响应 。 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 
<% 





callback = Request.Form("callback") 
Response. Write(callback) 


%> 

















于 发 送 POST 请 求 的 数据 类 型 (Content Type) 通常 是 application/x-www-form-urlencoded， 这 


意味 着 我 们 还 可 以 以 text/xml 或 application/xml 类 型 给 服务 器 直接 发 送 XML 数据 ， 甚 至 以 
application/json 类 型 发 送 JavaScript 对 象 。 
【示例 2】 下 面 示例 将 向 服务 器 端 发 送 XML 类 型 的 数据 ， 而 不 是 简单 的 串 行 化 名 / 值 对 数据 。 


function request(urD){ 


xmlHttp.open("POST".url. false): 
xmlHttp.setRequestHeader(‘Content-type'.'text/xml"): /设置 发 送 数据 类 型 
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xmlHttp.send("<bookstore><book id='1> 书 名 1</book><book id='2> 书 名 2</book></bookstore>"); | 
gp | 
你 提示 : 由 于 使 用 GET 方式 传递 的 信息 量 是 非常 有 限 的 ， 而 使 用 POST 方式 所 传递 的 信息 是 无 限 | 
的 ， 且 不 受 字符 编码 的 限制 ,还 可 以 传递 二 进 制 信息 。 对 于 传输 文件 ， 以 及 大 容量 信息 时 | 全 | 
多 采用 POST 方式 。 另 外 ， 当 发 送 安全 信息 或 XML 格式 数据 时 ， 也 应 该 考虑 选用 这 种 方 ， 
法 来 实现 。 


21.1.5 “转换 串 行 化 字符 串 


GET 和 POST 方法 都 是 以 “名 / 值 ”对 字符 串 的 形式 发 送 数据 。 

1. 传输 “名 / 值 ”对 信息 

“名 / 值 ”与 JavaSeript 对 象 结构 类 似 ,多 在 GET 参数 中 使 用 。 例如， 下面 是 一 个 包含 3 对 “名 / 值 ”| 视频 讲解 
的 JavaScript 对 象 数据 。 | 





{ | 
User:"ccs8"， | 
padd: "123456", | 

email: "css8@mysite.cn" | 

| 


将 上 面 原生 JavaScript 对 象 数 据 转换 为 串 行 格 式 显示 为 : 
user:"ccs8"&padd:"123456"&email:css8@mysite.cn 


2. 传输 有 序数 据 列表 


“名 / 值 ” 与 JavaScript 数组 结构 类 似 ,“ 名 / 值 ”多 在 一 系列 文本 框 中 提交 表单 信息 时 使 用 ， 它 与 | 
上 一 种 方式 不 同 ， 所 提交 的 数据 按 顺序 排列 ， 不 可 以 随意 组 合 。 例 如 ， 下 面 是 一 组 有 序 表单 域 信 息 ， | 
它 包含 多 个 值 。 
[ | 
{ name:"text", value:"css8" }、 
{ name:"text", value:"123456" }. 
{ name:"text". value:"css8@mysite.cn" } 
] 
| 
将 上 面 有 序 表单 数据 转换 为 串 行 格式 显示 如 下 : | 
text:"ccs8"& text:"123456"& text:css8@mysite.cn | 
【示例 】 下 面 示例 定义 一 个 函数 负责 把 数据 转换 为 串 行 格式 提交 ， 详 细 代码 如 下 : 
/把 数组 或 对 象 类 型 数据 转换 为 串 行 字符 串 | 
// 参 数 ，data 表示 数组 或 对 象 类 型 数据 | 
/返回 值 : 串 行 字符 串 | 
function toString(data){ 
Var a= []: 
这 data.constructor 一 Array){ // 如 果 是 数组 ， 则 遍历 读 取 元 素 的 属性 值 ， 并 存 入 数组 
for(vari= 0 :i< datalength : i++){ | 
a.push(datali].name + "=" + encodeURIComponent(datali].value)): | 
} 国 
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| } // 如 果 是 对 象 ， 则 遍历 对 象 ， 读 取 每 个 属性 值 ， 存 入 数组 
| else{ 
| for(var iin data){ 
| a.push(i + "=" + encodeURIComponent(data[i])): 
2 
| joino&m: / 二 > 
Teturn ajoin("&") /把 数组 转换 为 串 行 字符 串 ， 并 返回 


2 21.1.6 ”跟踪 状态 


| 使 用 XMLHttpRequest 对 象 的 readyState 属性 可 以 实时 跟踪 判断 异步 交互 状态 。 一 旦 该 属性 发 生 
| 变化 ， 就 触发 readystatechange 事件 ， 调 用 该 事件 绑 定 的 回调 函数 。readyState 属性 包括 5 个 值 ， 详 细 
视频 讲解 | 说 明 如 表 21.1 所 示 。 





表 21.1 readyState 属性 值 
说 了 明 

未 初始 化 。 表 示 对 象 已 经 建立 ， 但 是 尚未 初始 化 ， 尚 未 调用 open0 方 法 
初始 化 。 表 示 对 象 已 经 建立 ， 尚 未 调用 send0 方 法 
发 送 数据 。 表 示 send0 方 法 已 经 调用 ， 但 是 当前 的 状态 及 HTTP 头 未 知 
数据 传送 中 。 已 经 接收 部 分 数据 ， 因 为 响应 及 HTTP 头 不 全 ， 这 时 通过 responseBody 和 
responseText 获取 部 分 数据 会 出 现 错误 
完成 。 数 据 接收 完毕 ， 此 时 可 以 通过 responseBody 和 responseText 获取 完整 的 响应 数据 


如 果 readyState 全 二 4， 则 说 明 响应 完毕 ， 那 么 就 可 以 安全 读 取 返回 的 数据 。 另 外 ， 还 需要 
测 HTTP 状态 码 ， 只 有 当 HTTP 状态 码 为 200 时 ， 才 表示 HTTP 响应 顺利 完成 。 
| 在 XMLHttpRequest 对 象 中 可 以 借助 status 属性 获取 当前 的 HITP 状态 码 。 如 果 readyState 属性 
| 值 为 4， 且 status (状态 码 ) 属性 值 为 200， 那 么 说 明 HTTP 请 求 和 响应 过 程 顺利 完成 。 
| 【示例 】 定 义 一 个 函数 handleStateChange()， 用 来 监测 HTTP 状态 ， 当 整个 通信 顺利 完成 ， 则 读 
| 取 xmlhttp 的 响应 文本 信息 。 
| 
| if(xmlHttp readyState — 4){ 
| if (xmlHttp.status 一 200 | xmlHttp.status 一 0){ 
| alert(xmlhttp.responseText): 








BB 
» 
} 


然后 ， 修 改 request0 函 数 ， 为 onreadystatechange 事件 注册 回调 函数 。 
function request(urD){ 
XmlHttp.open("GET". url. false): 
xmlHttp.onreadystatechange = handleStateChange: 
xmlHttp.send(nulD): 
} 
上 面 代码 把 读 取 响 应 数据 的 脚本 放 在 函数 handleStateChange0 中 ， 然 后 通过 onreadystatechange 
」 事件 来 调用 。 
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了 
21.1.7 “中止 请 求 


使 用 abort0 方 法 可 以 中 止 正在 进行 的 异步 请 求 。 在 使 用 abort0 方 法 前 ， 应 先 清除 onreadystatechange | 
事件 处 理 函 数 ， 因 为 正 和 Mozilla 浏览 器 在 请 求 中 止 后 也 会 激活 这 个 事件 处 理 函 数 ， 如 果 给 | 
onreadystatechange 属性 设置 为 null， 则 正 浏览 器 会 发 生 异 常 ， 所 以 可 以 为 它 设置 一 个 空 函数 ， 代 码 | 
如 下 : 

xmlhttp.onreadystatechange = functionO{}; 

Xmlhttp.abortO: 


21.1.8 获取 XML 数据 


XMLHttpRequest 对 象 通过 responseText、responseBody、responseStream 或 responseXML 属性 获 | 
取 响 应 信息 ， 说 明 如 表 21.2 所 示 ， 它 们 都 是 只 读 属 性 。 


表 21.2 XMLHttpRequest 对 象 响 应 信息 属性 





将 响应 信息 正文 以 Unsigned Byte 数组 形式 返回 


以 ADO Stream 对 象 的 形式 返回 响应 信息 
将 响应 信息 作为 字符 串 返回 
将 响应 信息 格式 化 为 XML 文档 格式 返回 


在 实际 应 用 中 ， 一 般 将 格式 设置 为 XML、HTML、JSON 或 其 他 纯 文 本 格式 。 有 具体 使 用 哪 种 响应 
格式 ， 可 以 参考 下 面 几 条 原则 。 

回 ”如 果 向 页 面 中 添加 大 块 数据 ， 那 么 选择 HTML 格式 会 比较 方便 。 

回 ” 如 果 需 要 协作 开发 ， 且 项 目 庞杂 ， 那 么 选择 XML 格式 会 更 通用 。 

回 ”如 果 要 检索 复杂 的 数据 ， 且 结构 复杂 ， 那 么 选择 JSON 格式 更 轻便 。 

XML 是 使 用 最 广泛 的 数据 格式 。 因 为 XML 文档 可 以 被 很 多 编程 语言 支持 ， 而 且 开发 人 员 可 以 
使 用 比较 熟悉 的 DOM 模型 来 解析 数据 ， 其 缺点 在 于 服务 器 的 响应 和 解析 XML 数据 的 脚本 可 能 变 得 
相当 元 长 ， 查 找 数据 时 不 得 不 遍历 每 个 节点 。 

【示例 1】 在 服务 器 端 创建 一 个 简单 的 XML 文档 (XML _serverxml)。 

<?xml version="1.0" encoding="gb2312"?> 

<the>XML 数据 </the > 

然后 在 客户 端 进行 如 下 请 求 XML _main.html)。 

varx=createXMLHTTPObjectO: /JI 创建 XMLHttpRequest 对 象 

var url = "XML server.xml": 

x.open("GET", url, true); | 

x.onreadystatechange = function |O{ | 

f(x.readyState — 4 && x.status — 200 ){ | 
Var info=x.responseXML: 
alert(info.getElementsByTagName("the")[0].firstChild.data): 。“”// 返 回 元 信息 字符 串 "XML 数据 " 
} 








} 
x.send(nulD): 
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在 上 面 的 代码 中 使 用 XML DOM 提供 的 getElementsByTagName( 方 法 获取 the 节点 , 然后 再 定位 
| 第 一 个 the 节点 的 子 节点 内 容 。 此 时 如 果 继 续 使 用 responseText 属性 来 读 取 数 据 ， 则 会 返回 XML 源 
| 代码 字符 串 ， 如 下 所 示 : 

| <?xml version="1.0" encoding="gb2312"?> 





| <the>XML 数据 </the > 
【示例 2】 也 可 以 使 用 服务 器 端 脚本 生成 XML 文档 结构 。 例 如 ， 以 ASP 脚本 生成 上 面 的 服务 器 
| 端 响应 信息 
| <?xml version="1.0" encoding="gb2312"?> 
<% 


| 

| Response.ContentType = "text/xml” /定义 XML 文档 文本 类 型 ， 否 则 正 浏览 器 将 不 识别 

| Response Wiite("<the>XML 数据 </the >") 

| %> 

| 浴 提示 :对 于 XML 文档 数据 来 说 ， 第 一 行 必须 是 <?xml version="1.0" encoding="gb2312"?>， 该 行 

| 命令 表示 输出 的 数据 为 XML 格式 文档 ， 同 时 标识 了 XML 文档 的 版 本 和 字符 编码 。 为 了 

| 能 够 兼容 下 和 Firefox 等 浏览 器 ， 能 让 不 同 浏览 器 都 可 以 识别 XML 文档 ， 还 应 该 为 响应 

| 信息 定义 XML 文本 类 型 。 最 后 根据 XML 语法 规范 编写 文档 的 信息 结构 。 然 后 ， 使 用 上 
面 的 示例 代码 请 求 该 服务 器 端 脚本 文件 ， 同 样 能 够 显示 元 信息 字符 事 “XML 数据 ”。 


21.1.9 获取 HTML 文本 

| 

视频 讲解 | 设计 响应 信息 为 HTML 字符 串 是 一 种 常用 方法 ， 这 样 在 客户 端 就 可 以 直接 使 用 innerHTML 属性 

| 把 获取 的 字符 串 插 入 到 网 页 中 。 

| 【示例 】 在 服务 器 端 设计 响应 信息 为 HTML 结构 代码 (HTML _server.html)。 

| <able> 

| <tr><td>RegExp.exec0</td><td> 通 用 的 匹配 模式 </td></tr> 
<tr><td>RegExp.test0</td><td> 检 测 一 个 字符 串 是 否 匹 配 某 个 模式 </td></tr> 

</table> 


然后 在 客户 端 可 以 这 样 来 接收 响应 信息 (HTML _main.html)。 
div id="grid"></div> 
<script> 
function createXMLHTTPObjectO{ 
// 省 略 





} 
Var x = createXMLHTTPObjectO): /| 创建 XMLHttpRequest 对 象 
var url = "HTML server.html": 
x.open("GET", url true); 
x.onreadystatechange = function O{ 
f(x.readyState — 4 && x.status — 200 ){ 
| var 0= document.getElementById("grid"): 
| 0.innerHTML = x.responseText: // 把 响应 数据 直接 插入 到 页 面 中 进行 显示 
| 
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x.send(nul): 

</script> 

在 某 些 情况 下 ，HTML 字符 串 可 能 为 客户 端 解析 响应 信息 节省 了 一 些 JavaScript 脚本 ,但 是 也 带 

来 了 一 些 问 题 。 

加 ”响应 信息 中 包含 大 量 无 用 的 字符 ， 响 应 数据 会 变 得 很 腔 有 种 。 因 为 HTML 标记 不 含有 信息 ， 
完全 可 以 把 它们 放置 在 客户 端 由 JavaScript 脚本 负责 生成 。 

加 ”响应 信息 中 包含 的 HTML 结构 无 法 有 效 利 用 ， 对 于 JavaScript 脚本 来 说 , 它们 仅仅 是 一 堆 字 | 
符 串 。 同 时 结构 和 信息 混合 在 一 起 ， 也 不 符合 标准 设计 原则 。 


21.1.10 获取 JavaScript 脚本 
可 以 设计 响应 信息 为 JavaScript 代码 , 这 里 的 代码 与 JSON 数据 不 同 , 它 是 可 执行 的 命令 或 脚本 。 
【示例 】 在 服务 器 端 请 求 文件 中 包含 下 面 一 个 函数 (Code_serverjs)。 
fanctionO{ 
var d=new Date() 
return d.toStringO: 


ES 








} 
然后 在 客户 端 执 行 下 面 的 请 求 。 
Var x =createXMLHTTPObject(): // 创 建 XMLHttpRequest 对 象 
var url = "code server.js": 
x.open("GET", url tme): | 
x.onreadystatechange = function O{ | 
if (xreadyState — 4 && x.status — 200 ) { | 
Var info = x.responseText: | 
var 0=eval("("+infot")" + "0"); /调用 eval0 方 法 把 JavaScript 字符 串 转换 为 本 地 脚本 
alert(o): // 返 回 客户 端 当前 日 期 | 
} | 
) 
X.Send(null): | 
在 转换 时 应 在 字符 串 前 后 附加 两 个 小 括号 : 一 个 是 包含 函数 结构 体 的 ， 一 个 是 表示 调用 函数 的 。 | 
- 般 很 少 使 用 JavaScript 代码 作为 响应 信息 的 格式 ， 因 为 它 不 能 传递 更 丰富 的 信息 ， 同 时 JavaScript | 
脚本 极 易 引 发 安全 隐患 。 


21.1.11 获取 JSON 数据 


通过 XMLHttpRequest 对 象 的 responseText 属 性 获取 返回 的 JSON 数 据 字 符 串 ,然后 可 以 使 用 | 频 讲解 
方法 将 其 解析 为 本 地 JavaScript 对 象 ， 从 该 对 象 中 再 读 取 任何 想 要 的 信息 
【示例 】 下 面 的 实例 将 返回 的 JSON 对 象 字符 串 转 换 为 本 地 对 象 ， 然后 了 其 中 乌有 的 属性 人 | 
(JSON_main.html): 


var x = createXMLHTTPObjectO): /创建 XMLHttpRequest 对 象 
Var url = "JSON_serverjs": 1/ 请求 的 服务 器 端 文件 
xX.open("GET", url true): 

Xx.onreadystatechange = function O{ 
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| f(xreadyState — 4 && x.status — 200 ){ 
| Var info = x.responseText: // 获 取 响 应 信息 
| 


var 0=eval("(" + info + ")"); // 调 用 eval0 方 法 把 JSON 字符 串 转换 为 本 地 对 象 
大 | alert(info): // 显 示 响应 的 字符 串 ， 返 回 整 个 JSON 对 象 字符 串 
色 ] | alert(o.name): // 读 取 对 象 属性 值 ， 返 回 字符 串 "css8" 
| 
| x.send(null): 


| 在 转换 对 象 时 ， 应 该 使 用 小 括号 运算 包含 JSON 字符 串 ， 表 示 调 用 对 象 的 意思 。 如 果 是 数组 ， 则 
| 可 以 这 样 读 取 (JSON_mainl.html): 


x.onreadystatechange = function O{ 
if (x.readyState 一 4&& x.status — 200 ){ 
Var info = x.responseText: 
Var 0= eval(info); 
alert(info); // 显 示 响 应 的 字符 串 ， 返 回 整 个 JSON 对 象 字符 串 
alert(o[0].name): // 读 取 第 一 个 数组 元 素 值 的 属性 值 ， 返 回 字符 串 "css8" 





示 : eval0 方 法 在 解析 JSON 字符 串 时 存在 安全 隐患 。 如 果 JSON 字符 串 中 包含 恶意 代码 ， 在 
| 调用 回调 函数 时 可 能 会 被 执行 。 

| 解决 方法 : 使 用 一 种 能 够 识别 有 效 JSON 语法 的 解析 程序 ， 当 解析 程序 匹配 到 JSON 字符 
| 串 中 包含 不 规范 的 对 象 ， 会 直接 中 断 或 者 不 执行 其 中 的 恶意 代码 。 用 户 可 以 访问 
http://wwwjson.org/ison2.js 免费 下 载 JavaScript 版 本 的 解析 程序 。 不 过 如 果 确 信 所 响应 的 
JSON 字符 串 是 安全 的 ， 没 有 被 人 恶意 攻击 ， 那 么 可 以 使 用 eval0 方 法 解析 JSON 字符 串 。 





| 对 于 简短 的 信息 ， 有 必要 使 用 纯 文本 格式 进行 响应 。 但 是 纯 文本 信息 在 响应 时 很 容易 丢失 ， 且 没 
| 有 办 法 检测 信息 的 完整 性 。 因 为 元 数据 都 以 数据 包 的 形式 进行 发 送 ， 不 容易 丢失 。 
【示例 】 服 务 器 端 响应 信息 为 字符 串 "true"， 可 以 在 客户 端 这 样 设计 。 
var X= createXMLHTTPObjectO: 
Var url = "Text_server.txt"; 
x.open("GET", Url true): 
x.onreadystatechange = function O{ 
if (xreadyState — 4 && x.status — 200 ) { 

Var info=x.responseText: 

这 info 一 "true") alert(" 文 本 信息 传输 完整 "): // 检 测 信息 是 否 完整 

else alert(" 文 本 信息 可 能 存在 丢失 "): 


| » 

| } 

| x.send(null): 
| 

| 
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21.1.13 ”获取 头 部 信息 


每 个 HTTP 请 求 和 响应 的 头 部 都 包含 一 组 消息 ,对 于 开发 人 员 来 说 , 获取 这 些 信息 具有 重要 的 参 | 
考 价值 。XMLHttpRequest 对 象 提供 了 两 个 方法 用 于 设置 或 获取 头 部 信息 。 | 
getAll]ResponseHeaders0: 获取 响应 的 所 有 HTTP 头 信息 。 

加 ”getResponseHeader(): 从 响应 信息 中 获取 指定 的 HITP 头 信息 。 
【示例 1】 下 面 示例 将 获取 HTTP 响应 的 所 有 头 部 信息 。 | 
var x = createXMLHTTPObijectO: 
Var url = "server.txt"; 
x.open("GET", url true); 
x.onreadystatechange = function |O{ 
if (x.readyState — 4 && x.status — 200 ) { 
alert(x.getAllResponseHeaders(): // 获 取 头 部 信息 
} 





} 
x.send(null): 


| 
【示例 2】 下 面 是 一 个 返回 的 头 部 信息 示例 , 具体 到 不 同 的 环境 和 浏览 器 , 返回 的 信息 会 略 有 不 同 。 | 
X-Powered-By: ASPNET | 
Content-Type: text/plain | 
ETag: "0b76f78d2b8c91:8e7" 
Content-Length: 2 
Last-Modified: Thu. 09 Apr 2017 05:17:26 GMT 


如 果 要 获取 指定 的 某 个 首部 消息 ， 可 以 使 用 getResponseHeader0 方 法 ， 参 数 为 获取 首部 的 名 称 。 
例如 ， 获 取 Content-Type 首部 的 值 ， 可 以 这 样 设 计 。 
alert(x.getResponseHeader("Content-Type")): 


除了 可 以 获取 这 些 头 部 信息 外 , 还 可 以 使 用 setRequestHeader0) 方 法 在 发 送 请 求 中 设置 各 种 头 
部 信息 。 | 


xmlHttp.setRequestHeader("name"."css8"): 
xmlHttp.setRequestHeader("level"."2"): 


服务 器 端 就 可 以 接收 这 些 自 定义 头 部 信息 ， 并 根据 这 些 信息 提供 特殊 的 服务 或 功能 了 。 | 


21.2 案例 实战 





频 讲 解 


| 

本 例 设 计 人 允许 用 户 根据 需要 动态 确定 页 面 可 显示 的 记录 数 , 然后 以 异步 请 求 的 方式 从 服务 器 端 数 | = 
据 库 中 按 需 查询 ， 实 时 响应 ， 示 例 效 果 如 图 21.1 所 示 。 | 
如 图 21.1 所 示 ， 当 用 户 在 页 面 内 的 文本 框 中 输入 要 显示 的 记录 数 ， 然 后 单 击 “ 查 询 ” 按 钮 ，Ajax | 
就 会 把 该 参数 传递 给 服务 器 ， 服务 器 根据 这 个 参数 查询 数据 库 ,获得 一 个 记录 集 , 然后 把 这 个 记录 集 转 | 
换 为 XML 格式 的 数据 响应 给 客户 端 ， 浏 览 器 再 以 表格 的 形式 显示 在 页 面 中 。 | 


| 
| 
深 提示 所 谓 记录 集 就 是 从 数据 库 中 查询 的 一 个 临时 数据 表 ， 类 似 表格 结构 的 多 行 记录 . \ 
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显示 记录 个 数 


] (吉凶 H 条 ) [到 本 显示 记录 数 ， 








单 下 指定 请 家 的 某 个 http 关 单据 庆 请 下 的 革 人 pttp 关 





人 过 请 家 到 bttp 慑 务 大 开 其 收回 记 发 关 请 来 天 http 服 务 号 并 拉 笋 国 应 
全 寻 一 个 新 的 ht 人 请 来 ， 齐 指定 谍 请 来 的 方法 【 开 以 及 入 让 入 
息 [ 朋 户 名 / 罕 码 ) 




















从 响应 信息 中 获取 指定 的 http 关 





Er Pan Fan Far Err em 





区 了 有 应 的 所 有 http 纪 | 














查询 3 条 记录 查询 5 条 记录 
图 21.1 动态 查询 记录 集 


【操作 步骤 】 
第 1 步 ， 构 建 数据 结构 ， 数 据 库 是 前 台 与 后 台 信息 交互 的 基础 。 本 示例 以 Access 数据 库 为 载体 


进行 讲解 。 所 建立 的 数据 库 名 为 datamdb， 库 中 定义 了 一 个 数据 表 (xmlhttp)， 如 图 21.2 所 示 。 


CER SR map ~ Mecess 





~ WNW 











此 水 的 方法 ，UELIA 有 冯 证 信息 (用 








草 
回 
示例 效果 21.2 演示 数据 库 


xmlhttp 表 中 包含 4 个 字段 :id (自动 编号 数据 类 型 ， 序 列 号 ， 由 数据 库 自 动 生成 )、who 字符 
串 数 据 类 型 ， 表 示 成 员 名 称 )、class〈 字 符 串 数据 类 型 ， 表 示 成 员 类 型 ， 如 属性 或 方法 ) 和 what〈 字 
符 串 数据 类 型 ， 表 示 对 成 员 说 明 )。 

第 2 步 , 编 写 后 台 脚 本 , 处 理 Ajax 异步 请 求 并 进行 响应 .启动 Dreamweaver, 新 建文 档 ,保存 为 test.asp。 

在 服务 器 端 脚 本 中 ， 首 先 获 取 客 户 端 传递 过 来 的 参数 值 〈 指 定 查询 的 记录 数 ); 然后 ， 使 用 ADO 
定义 一 个 记录 集 ， 连 接 到 后 台数 据 库 ， 并 查询 指定 记录 数 的 记录 集 。 

最 后 ， 利 用 while 循环 体 遍历 记录 和 集 逐条 读 取 记录 ， 把 记录 转换 为 XML 格式 数据 。 根 据 XML 
| 性 式 入 号 一 个 MD 六 六， 编辑 好 后 响应 给 客户 端 浏 览 器 。 

test.asp 文件 的 完整 脚本 如 下 : 

<?xml version="1.0" encoding="gb2312"?> 

<% 

Response.ContentType = "text/xml” "定义 XML 文档 文本 类 型 

set conn = Server.CreateObject("adodb.connection") 
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data = Servermappath("data mdb") "获取 数据 库 的 物理 路 径 

conn.Open "driver={microsoft access driver (*.mdb)}:"&"dbq="&data ' 用 数据 库 连 接 对 象 打开 数据 库 | 

coun=CInt(Request("coun")) 获取 客户 端 传递 过 来 的 参数 ， 并 转 为 数值 ， 以 便 进 行 运算 | 
| 





%> 

<% ' 定 义 并 打开 记录 集 | 

set rs = Server.CreateObject("adodb.recordset") "定义 记录 集 对 象 | 

sql a "定义 SQL 查询 字符 串 

rs.open sql,conn, 打开 记录 和 集 , 第 1 个 参数 表示 查询 字符 串 , 第 2 个 参数 表示 数据 库 连 1 
接 对 象 ， 第 3 参数 家 示 指针 类 型 ， 第 4 个 参数 表示 锁定 类 型 | 


> | 
-- 以 下 脚本 用 来 输出 XML 文档 结构 和 数据 信息 --> | 
<data count="<%=coun%>" ><!-- 输出 根 节点 ， 定 义 属性 ，<%=coun%> 表 示 ASP 脚本 输出 意思 --> 


<% 
| 
0 | 
while (not rs.eof) and (n<coun) ' 遍 历 记录 集 ， 并 确保 循环 次 数 等 于 指定 查询 记录 数 
%> | 
<item id="<%=rs("id")%>"> -- 输出 子 节点 --> 
<who><%=trim(rs("who")) %></who> -- 输出 孙子 节点 -> 
<class><%=trim(rs("class")) %></class> a 输出 孙子 节点 --> | 
<what><%=trim(rs("what")) %></what> <!-- 输出 孙子 节点 --> | 
</item> | 
<% | 
n=n+1 "递增 循环 次 数 | 
TS.InoVenext ' 向 下 移动 记录 集 指针 ， 以 读 取 下 一 条 记录 | 
wend | 
%> | 
</data> <!-- 输出 根 节点 的 结束 节点 --> | 
1 


在 上 面 ASP 脚本 中 ,“<%=” 和 “%>” 表 示 一 种 快速 输出 方法 ， 它 能 够 很 自由 地 在 文档 中 输出 | 
脚本 变量 信息 。 另 外 ，“<%=trim(rs("who")) 9%>” 表 示 输 出 记录 集中 指定 字段 的 值 ，trim0 函 数 表示 清 | 
除 左右 两 侧 的 空格 。 

第 3 步 ， 设 计 前 台 页 面 。 新 建文 档 ， 保 存 为 index.html， 在 页 面 中 设计 表单 :文本 框 和 按钮 ， 以 
及 一 个 用 来 显示 响应 信息 的 信息 框 : <div id="info">。 | 


<h1> 显 示 记录 数 </hl> 显 示 记 录 数 : <input name="coun" type="text" id="coun"> (最 多 14 条 ) 

<input type="button" onclick="check0:" value=" 查 询 "> | 

<div id="info"></div> | 

第 4 步 , 在 index.html 文档 头 部 插入 <style> 标 签 ， 定 义 一 个 内 部 样式 表 ， 使 用 CSS 定义 输出 表格 | 
的 显示 样式 。 | 


table {/* 表 格 结构 的 样式 */ 


margin:lem:; 上 # 增加 外 边界 距离 */ | 
border-collapse:collapse: 庆 合并 单元 格 的 边框 */ | 
border:solid 1px #FF33FF: 上 定义 边框 样式 所 | 

} | 
td 也 {/* 单 元 格 和 标题 单元 格 的 样式 */ | 
border:solid 1px #FF33FF: 上 # 定义 单元 格 边 框 样式 */ | 
padding:4px 8px: 证 增加 单元 格 的 内 部 补 白 空隙 */ | 

| 

\ 
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第 5 步 ， 定 义 函数 check0， 并 绑 定 在 按钮 的 click 事件 上 。 该 函数 将 连接 和 发 送 请 求 到 服务 器 ， 
| 同时 绑 定 回调 函数 。 
| 


function checkO{ 
仿 F | Var coun = document.getElementById( "coun" ).value; 


request( "test.asp?coun=" + coun, callback ): // 发 出 异步 请 求 
| 第 6 步 , 定义 回调 函数 。 在 回调 函数 callback0 中 ， 先 获取 XML 格式 的 响应 数据 , 然后 遍历 XML 
| 结构 的 数据 片段 ， 把 各 个 节点 包含 的 文本 转换 为 HTML 字符 串 ， 最 后 以 表格 结构 的 形式 显示 出 来 。 


function callback( xhr ) 
var xml = xhrresponseXML; /获取 responseXML 响应 数据 
Var count = ""; 
var html =""; 
var items = xml.getElementsByTagName( "item" );”// 获 取 item 元 素 节点 集合 
html += "<table><tr><th> 成 员 名 </ 耻 ><th> 类 型 </th><th> 说 明 </th></tr>" // 输 出 表格 
for( var i=0 ; i< items.length; i++ ){ // 遍 历 item 节点 集合 
html += "<tr>" 
var child = items[i].childNodes 
for( var n=0 ; n< childlength: n++ ){ // 遍 历 item 子 节点 集合 
这 child[n] nodeType 一 1 ){ 1/ 判断 节点 类 型 ， 如 果 是 元 素 则 读 取 包 含 信息 
html += "<td>" 
html += child[n] .firstChild.data: /获取 每 个 孙子 节点 包含 的 文本 节点 信息 
html += "</td>" 














| 
| ) 
| } 
html += "</tr>"; 

} 

html += "</table>"; 
| Var info = document.getElementById( "info" ); 
| info.innerHTML = html: /显示 XML 数据 
| 


21.3 扫 码 实战 


本 节 为 线 上 拓展 内 容 ， 将 结合 几 个 典型 案例 从 不 同 侧面 介绍 Ajax 的 应 用 。 为 便于 学 习 ， 在 设计 
| 实例 时 ， 侧 重 实际 需要 ， 提 炼 核心 技术 ， 避 免 重 复 。 每 个 示例 都 涉及 XMLHttpRequest 创建 操作 ， 由 
| 于 该 函数 在 21.1 节 中 已 详细 说 明 ， 本 节 就 不 再 资 述 。 


| 21.3.1 Ajax 交互 提示 


在 使 用 Ajax 时 ， 浏 览 器 不 再 刷新 页 面 ， 这 样 用 户 就 无 法 知道 页 面 的 交互 进程 ， 
网 页 是 否 与 后 台 联 系 , 数据 是 否 加 载 更 新 。 当 打开 一 个 空白 页 时 ,也 许 数据 还 没有 被 
加 载 完 毕 ， 但 是 如 果 没 有 提示 信息 ， 会 让 用 户 无 所 适 从 ， 甚 至 产生 误解 。 为 了 避免 此 
类 问题 ， 让 用 户 知道 当前 操作 的 进程 ， 应 该 提供 实时 提示 信息 。 有 具体 实现 方法 请 扫 码 
阅读 。 
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21.3.2 ”记录 集 分 页 显示 


记录 集 分 页 就 是 把 从 数据 库 中 查询 的 数据 分 多 页 进行 显示 , 这 样 能 够 避免 记 
录 集 单 页 过 长 显示 。 记 录 集 分 页 的 设计 思路 : 利用 SQL 字符 串 查询 出 需要 的 数 
据 ， 然 后 根据 记录 集 对 象 的 分 页 属性 确定 每 次 从 服务 器 端 发 送 给 客户 端的 记录 数 
和 迪 辑 页 记录 和 集 在 整个 查询 的 记录 集中 的 位 置 。 在 使 用 Ajax 技术 之 后 ,只 需要 
确定 记录 集 当 前 指针 位 置 即 可 ， 简 化 开发 难度 。 具 体 实现 方法 请 扫 码 阅读 。 | 


21.3.3 ”异步 更 新 Tab 面板 内 容 | 
本 实例 设计 一 个 能 够 异步 更 新 的 Tab 面板 。 当 用 户 切换 Tab 面板 选项 卡 时 ， 


面板 会 自动 从 后 台数 据 库 中 读 取 数据 并 动态 显示 出 来 , 而 不 是 在 页 面 加 载 时 已 经 
全 部 下 载 并 隐藏 起 来 。 具 体 实 现 方法 请 扫 码 阅读 。 
21.3.4 快速 匹配 搜索 

本 实例 设计 当 用 户 在 文本 框 中 输入 关键 字 时 , 浏览 器 会 自动 从 后 台数 据 中 查 
询 匹 配 数据 ， 并 迅速 显示 在 下 面 的 下 拉 菜 单 中 ， 以 供 输入 选择 ， 当 从 下 面 的 下 拉 


菜单 中 选择 一 项 之 后 ， 选 取 结 果 会 快速 输入 到 上 面 的 文本 框 中 ， 避 免 手 动 输入 。 
具体 实现 方法 请 扫 码 阅读 。 





21.4 搭建 IIS 虚拟 服务 器 | 


为 了 确保 数据 交互 的 安全 性 ，Ajax 一 般 采 用 沙 箱 模型 策略 ， 即 XMLHttpRequest 对 象 只 能 对 所 在 | 
的 同一 个 域 〈 网 站 ) 发 送 请 求 和 响应 。 例 如 ， 如 果 和 希望 Ajax 代码 在 http:/www.mysite.cn/ 上 运行 ， 则 | 
必须 在 http://www.mysite.cn/ 中 运行 的 脚本 发 送 请 求 。 

为 了 便于 上 机 测试 ,用 户 需要 在 本 地 计算 机 中 构建 一 个 虚拟 的 服务 器 环境 , 如 果 购 买 了 虚拟 空间 ， 
则 就 不 用 搭建 本 地 虚拟 环境 ， 使 用 远程 服务 器 也 可 以 进行 测试 。 如 果 读 者 想 了 解 IS 的 安装 和 配置 ， 
可 以 扫 码 阅读 。 
安装 IS 组 件 。 
定义 虚拟 目录 。 
定义 本 地 站 点 。 
定义 动态 站 点 。 
测试 本 地 站 点 。 


加 回回 轿 加 





21.5 在 线 练 习 | 


练习 JavaScript 异步 通信 的 应 用 ， 培 养 灵活 使 用 JavaScript 通信 技术 实现 客 
户 端 与 服务 器 无 刷新 响应 的 基本 能 力 。 
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表格 开发 


表格 结构 简洁 、 明 了 ， 拥 有 将 殊 的 布局 模型 ， 使 用 表格 显示 数据 有 序 、 高 效 。 表 格 作为 重 
要 的 网 页 设计 工具 ， 一 直 受 到 开发 人 员 的 青睐 。 本 章 主要 讲解 如 何 使 用 JavaScript 和 jQuery 来 


提升 表格 的 用 户 体验 ， 增 强 表格 的 交互 能 力 


【 学 习 要 点 】 

WI 快速 访问 表格 

WI 表格 排序 、 表 格 分 页 。 
WI 表格 过 波 、 表 格 编辑 
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22.1 访问 表格 





表格 是 HTML 中 最 复杂 的 结构 之 一 。 要 想 创建 表格 一 般 都 必须 涉及 表示 表格 行 、 单 元 格 、 表 头 
等 方面 的 标签 。 由 于 涉及 的 标签 多 ， 因 而 使 用 核心 DOM 方法 创建 和 修改 表格 往往 都 需要 编写 大 量 的 
代码 。 为 了 方便 构建 表格 ，HTML DOM 为 <table>、<tbody> 和 <tr> 元 素 添加 了 一 些 属性 和 方法 。 | | 
说 明 如 下 : 
加 ”为 <table> 元 素 添加 的 属性 和 方法 如 下 。 
党 ”caption: 保存 着 对 <caption> 元 素 (如 果 有 ) 的 指针 。 
党“ tBodies: 是 一 个 <tbody> 元 素 的 HTMLCollection。 | 
党 tFoot: 保存 着 对 <tfoot> 元 素 ( 如 果 有 ) 的 指针 。 | 
必 {Head: 保存 着 对 <thead> 元 素 (如 果 有 ) 的 指针 。 | 
党 ”rows: 是 一 个 表格 中 所 有 行 的 HIMLCollection。 
学 createTHead0: 创建 <thead> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引用 。 | 
createTFoot0: 创建 <tfoot> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引用 。 | 
createCaption0: 创建 <caption> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引用 。 | 
deleteTHead0: 删除 <thead> 元 素 。 | 
| 
| 
| 
| 
| 


< 


ie 
人 


ie 
人 


deleteTFoot0: 删除 <tfoot> 元 素 。 
deleteCaption0: 删除 <caption> 元 素 。 
deleteRow(pos): 删除 指定 位 置 的 行 。 
insertRow(pos): 向 rows 集合 中 的 指定 位 置 插 入 一 行 。 
[ul 为 cbody 元 素 添加 的 属性 和 方法 如 下 。 
党 ”rows: 保存 着 <tbody> 元 素 中 行 的 HTMLCollection 。 
人 学。 deleteRow(pos): 删除 指定 位 置 的 行 。 
党 insertRow(pos): 向 rows 集合 中 的 指定 位 置 插入 一 行 ， 返 回 对 新 插入 行 的 引用 。 
回 “” 为 <tr> 元 素 添加 的 属性 和 方法 如 下 。 
党 。 cells: 保存 着 <tr> 元 素 中 单元 格 的 HIMLCollection 。 
党 ”deleteCellpos): 删除 指定 位 置 的 单元 格 。 | 
党 insertCell(pos): 向 cells 集合 中 的 指定 位 置 插入 一 个 单元 格 ， 返回 对 新 插入 单元 格 的 | 
引用 。 
使 用 这 些 属性 和 方法 , 可 以 极 大 地 减少 创建 表格 所 需 的 代码 数量 。 下 面 创建 一 个 两 行 两 列 的 表格 ， 
对 比 两 种 方法 的 便捷 程度 。 
【示例 】 使 用 表格 专用 属性 和 方法 创建 表格 。 
/创建 table 
var table = document.createElement('table"): 
table.border=1:; 
table.width ="100%'; 


ie 
人 


人 


table.appendChild(tbody): 
// 创 建 第 一 行 
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tbody.insertRow(0): 

tbodyrows[O] insertCell(0): 
tbody.rows[0].cells[0].appendChild(document.createTextNode(" 第 1 行 ， 第 1 列 ")); 
tbody.rows[0].insertCell(1): 

食 斤 | | tbody.rows[0].cells[1].appendChild(document.createTextNode(" 第 1 行 ， 第 2 列 ")); 
| // 创 建 第 二 行 


toe) 
tbody.rows[1].insertCell(0): 
| tbody.rows[1].cells[0].appendChild(document.createTextNode(" 第 2 行 ， 第 1 列 ")); 
tbody.rows[1].insertCell(1): 
tbody.rows[1].cells[1].appendChild(document.createTextNode(" 第 2 行 ， 第 2 列 ")); 
// 将 表格 添加 到 文档 中 
document.body.appendChild(table): 


222 表格 排序 


表格 排序 的 实现 途径 包括 两 种 : 一 种 是 在 数据 生成 时 由 服务 器 负责 排序 ， 另 一 种 是 在 数据 显示 时 
| 由 JavaScript 脚本 负责 动态 排序 。 本 节 主 要 介绍 如 何 直 接 使 用 JavaScript 进行 排序 。 


22.2.1 设计 适合 排序 的 表格 结构 


| 依据 设计 习惯 ， 当 用 户 单 击 表 格 标题 行 时 ， 表 格 能 够 根据 单 击 列 的 数据 进行 排序 ， 因 此 在 开发 之 
| 前 ， 用 户 需 要 考虑 3 个 问题 。 

| 第 一 ， 把 表格 的 列 标题 设计 为 按钮 ， 为 其 绑 定 click 事件 ， 以 便 触 发 排序 函数 ， 实 现 按 照相 应 的 
| 列 进行 排序 。 

| 第 二 ,使 用 <thead> 和 <tbody> 对 表格 数据 进行 行 分 组 ， 以 方便 JavaScript 有 针对 性 地 操作 数据 行 ， 
| 避免 影响 标题 行 和 脚注 行 。 

| 第 三 ,构建 符合 数据 排序 的 表格 结构 既 要 考虑 表格 的 扩展 性 ,还 要 考虑 方法 的 通用 性 。 在 动态 表 
| 格 中 , 用户 无 法 预知 表格 数据 的 长 度 和 宽度 ， 同 时 也 无 法 预知 用 户 对 表格 的 额外 要 求 ， 如 添加 表格 页 
脚 ， 对 数据 进行 分 组 。 还 要 确保 表格 在 不 同 的 网 页 环境 中 都 能 够 正确 显示 和 有 效 交 互 。 

【示例 】 本 例 设 计 了 一 个 简单 的 表格 结构 ， 通 过 <thead> 和 <tbody> 标 签 对 数据 行进 行 分 组 ， 避 免 
数据 行 和 标题 行 的 混淆 ， 通过 <th> 和 <td> 标 签 有 效 减少 单元 格 互 用 。HTML 结构 代码 请 参考 本 节 示 例 
源 代码 。 

然后 ， 在 网 页 头 部 区 域 添加 <style> 标 签 ， 定 义 内 部 样式 表 ， 对 表格 进行 适当 美化 。 

其 中 要 考虑 几 个 常用 类 样式 的 设计 工作 : 
td.sorted: 设计 排序 列 单元 格 的 背景 色 ， 以 便 高 亮 显示 排序 列 。 

也 .sorted-asc: 设计 排序 列 标题 单元 格 箭头 提示 的 背景 图 像 标识 ， 提 示 升 序 排序 。 
也 .sorted-desc: 设计 排序 列 标题 单元 格 箭头 提示 的 背景 图 像 标 识 ， 提 示 降 序 排序 。 
tr.even, tr.first: 设计 隔行 换 色 的 显示 样式 ， 即 单行 背景 样式 。 

tr.odd, tr.second: 设计 隔行 换 色 的 显示 样式 ， 即 双 行 背景 样式 。 

trthird: 设计 特殊 行 背景 样式 。 

CSS 样式 代码 请 参考 本 节 示 例 源 代码 。 

初步 设计 后 的 表格 样式 效果 如 图 22.1 所 示 。 








加 网 加 加 罗网 
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图 22.1 设计 的 表格 样式 





22.2.2 ”实现 基本 排序 功能 


对 表格 进行 排序 时 ， 可 以 使 用 JavaScript 的 sort0 方 法 来 实现 。sort0 是 数组 对 象 的 原型 方法 ， 可 | 视频 讲解 
以 接收 一 个 参数 函数 ， 用 来 控制 排序 的 方法 。 | 
在 对 表格 进行 排序 之 前 ， 用 户 应 该 注意 两 个 问题 : | 
并 不 是 页 面 中 所 有 表格 都 需要 排序 。 | 
加 ”并 不 是 表格 中 每 列 都 需要 排序 。 | 
在 设计 之 初 , 可 以 为 需要 排序 的 表格 做 一 个 标记 , 方便 JavaScript 捕获 ; 同时 为 排序 列 进行 标记 ， | 
以 方便 JavaScript 进行 处 理 。 本 例 以 为 表格 设计 一 个 排序 类 进行 标识 ， 对 于 需要 排序 的 列 添加 一 个 类 | 
标记 。 修 改 后 的 HTML 表格 结构 代码 如 下 : | 
<table class="sortable"> 
<thead> 
<tr> 
<th class="sort-alpha">ID</th> 
<th class="sort-alpha"> 产 品名 称 </th> 
<th class="sort-alpha"> 标 准 成 本 </th> 
<th class="sort-alpha"> 列 出 价格 </th> 
<th class="sort-alpha"> 单 位 数量 </th> | 
<th class="sort-alpha"> 最 小 再 订购 数量 </th> | 
<th class="sort-alpha"> 类 别 </th> | 
</> 
</thead> 


La 

| 

根据 <table class="sortable"> 和 <th class="sort-alpha"> 标 签 中 的 类 名 ， 就 可 以 添加 脚本 实现 基本 的 | 
排序 功能 了 。JavaScript 脚本 如 下 所 示 : | 


$.fn.alternateRowColors = function| { 
S$('tbody tr:odd'. this).removeClass('‘even'").addClass(‘odd"): | 
$('tbody treven', this) removeClass(odd').addClass(even7): | 
return this: 人 
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| } 
| S$(functionO { 
| S$('table.sortable').each(function| { 
P| Var S$table = $(this); 
全 | StablealtemateRowColors0: 
4 Stable find('th').each(function(column) { 
(S(this) is( .sort-alpha')) { 
| S(this).addClass('clickable’).hover(functionO { 
| S(this).addClass('hover): 
}. functionO { 
S$(this).removeClass(‘hover’): 
PD.click(functionO) { 
roOWs = S$table.find('tbody > tr').getO: 
Tows.sort(function(a, b) { 
var a= $(a).children("td").eq(column).textO.toUpperCase(): 
var b = $(b).children("td").eq(column).text().toUpperCase(); 
ifla<b) 
Tetum -1; 
ifla>b) 
retum 1: 
Teturn 0: 


D: 
$.each(rows, function(index, row) { 
S$table.children(tbody ).append(row): 


在 实现 数据 排序 之 前 ， 先 为 jQuery 对 象 扩展 一 个 简单 方法 : alternateRowColors0。 

在 上 面 代码 中 ,使 用 each0 方 法 进行 显 式 迭代 , 而 不 是 直接 使 用 $('table.sortable th.sortralpha).clickO 
选择 并 为 每 个 带 有 sort-alpha 类 的 标题 单元 格 绑 定 click 事件 处 理 程序 。 

由 于 each0 方 法 会 向 它 的 回调 函数 中 传递 迭代 索引 ， 使 用 它 可 以 方便 地 捕获 到 一 个 关键 信息 ， 即 
单 击 标题 的 列 索引 ， 在 后 面 使 用 这 个 列 索 引 来 找到 每 个 数据 行 中 相关 单元 格 。 

在 找到 带 有 sort-alpha 类 的 标题 单元 之 后 ， 接 下 来 取得 一 个 包含 所 有 数据 行 的 数组 ， 这 是 一 个 通 
过 get0 方 法 将 jQuery 对 象 转换 为 一 个 DOM 节 点 的 数组 ,之 所 以 要 进行 这 样 的 转换 ,是 因为 虽然 jQuery 
对 象 在 多 方面 与 数组 类 似 ， 但 是 它 不 具有 任何 本 地 数组 的 方法 ， 如 sort0 方 法 。 

调用 sort0 方 法 比较 简单 ， 它 通过 比较 相关 单元 格 的 文本 ， 实 现 对 表格 行进 行 排序 ， 这 里 主要 根 
据 each0 方 法 回调 函数 中 参数 ,可 以 传递 也 在 table 中 的 列 序号 , 并 通过 这 个 列 序号 获取 该 列 的 tbody 
包含 的 该 列 单元 格 。 

考虑 到 文本 大 小 写 问题 ， 因 此 在 比较 时 应 该 区 分 大 小 写 。 最 后 ， 通 过 循环 遍历 排序 后 的 数组 ， 将 
表格 行 重新 插入 到 表格 中 。 注 意 ， 因 为 append() 方 法 不 会 复制 节点 ， 而 是 移动 表格 行 ， 因 此 可 以 看 到 
表格 数据 行 重新 排序 。 

由 于 在 排序 过 程 中 表格 行 被 打 乱 顺序 重新 进行 显示 ,最 初 设计 的 隔行 换 色 的 样式 发 生 了 混乱 ， 当 
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完成 表格 数据 行 排序 之 后 ， 应 该 重新 设置 隔行 换 色 的 背景 样式 ， 在 完成 表格 排序 之 后 ， 重 新 调用 
alternateRowColors0 方 法 。 实 现 排 序 的 效果 如 图 22.2 所 示 。 





图 22.2 初步 实现 的 排序 效果 


22.2.3 ”优化 排序 性 能 


直接 调用 JavaScript 的 sort0 方 法 进行 排序 ， 当 表格 数据 比较 多 时 ， 运 行 速度 会 比较 慢 。 
解决 方法 : 预先 计算 用 于 比较 的 关键 字 ， 可 以 提取 每 个 排序 单元 格 中 的 关键 字 计 算 ， 并 将 这 个 过 
程 从 和 欠 代 回 调 函 数 中 抽 离 出 来 ， 在 一 个 单独 的 循环 中 完成 ， 避 免 在 回调 函数 中 被 反复 调用 。 
Var rows = S$table.find('tbody > tr).getO: 
$.each(rows.function(index. row){ 
row.sortkey = $(row).children("td").eq(column) .textO.toUpperCaseO: 


D: 
$.each(rows, function(index, row) { 
Stable.children('tbody’).append(row): 
row.sortKey = mull: | 
D; | 
在 一 个 循环 中 , 把 所 有 占用 资源 的 工作 全 部 完成 , 并 把 计算 的 结果 保存 到 每 个 单元 格 的 新 属性 中 ， 
这 个 属性 并 非 是 DOM 预定 义 属性 ， 但 是 考虑 到 每 个 单元 格 都 需要 这 样 一 个 关键 字 ， 通 过 属性 的 方式 | 
保存 ， 当 调用 回调 函数 进行 比较 时 ， 可 以 直接 读 取 每 个 单元 格 的 这 个 新 属性 值 ， 避 免 重 复 计算 。 | 
当 完 成 排序 操作 之 后 ， 应 该 删除 sortKey 属性 ， 以 便 手动 释放 内 存 ， 和 避免 大 量 的 sortKey 属性 值 | 
占用 系统 资源 ， 导 致 内 存 泄漏 。 | 


| 
| 
\ 
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| sort0 默 认 排 序 方式 是 根据 字符 编码 顺序 进行 计算 ， 当 然 ， 不 同 数据 类 型 的 数据 可 能 希望 采用 其 
全 内 | 他 类 型 排序 方式 , 如 日 期 、 数字、 货币 等 。 根据 这 些 数 据 类 型 的 特点 , 可 以 在 关键 字 计 算 中 进行 处 理 。 
一 一 | 实现 代码 如 下 : 
$.fn.altemateRowColors = fonction0 { 

S$('tbody tr:odd', this).removeClass('even').addClass(‘odd'): 

S$('tbody tr:even', this).removeClass('‘odd').addClass('even"): 

return this; 





}; 
| S$(function| { 
| S$('table.sortable').each(function| { 
| var Stable = $(this); 
Stable.alternateRowColors(); 
Stable.find('th'").each(function(column) { 
Var 
| if($(this).is(.sort-alpha’)) { 
| findSortKey = function($cel) { 
| Teturn $cell.text|.toUpperCaseO: 
3 
} else if($(this).is('.sort-numeric'")) { 
findSortKey = function($cel) { 
| Var key = parseFloat($cell.textO.replace(/^[N\d.]*/, ")): 
| Teturn isNaN(key) ? 0 : key: 
| 


3 
} else if($(this).is(.sort-date’)) { 
findSortKey = function($cell) { 
Tetum Date.parse('1 ' + $cell.textO); 
$s 
} 
这 findSortKey) { 
VarIows=$table.find(tbody > tr).getO: 
S$dthis).addClass(Cclickable).hover(functionO { 
| S$(this).addClass(hover’): 
| }. function| { 
| S(this) removeClass(hover’): 
.click(function|) { 
$.each(rows. function(index. row) { 
IOW.sortKey = findSortKey($(row).children('td'").eq(column)): 
| D:; 
| Tows.sort(function(a. b) { 
| 这 asortKey < b.sortKey) 
| Tetum -1: 
这 a.sortKey > b.sortKey) 
retum 1: 
| Tetum 0: 
| Dy 
| $.each(rows, function(index. row) { 
Stable.children('‘tbody’).append(row); 
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row.sortKey = mull: 
D; 
Stable.alternateRowColors().trigger(repaginate"): 





对 于 货币 数据 来 说 ,在 比较 之 前 应 该 去 掉 货 币 前 级 符号 ,然后 再 根据 需要 进行 比较 计算 ; 对 于 数 | 
字 类 型 来 说 ， 需 要 使 用 parseFloat0 把 值 进 行 类 型 转换 ， 如 果 不 能 够 转换 ， 则 需要 使 用 isNaN0 方 法 检 | 
测 是 否 为 非 数 字 值 ， 然 后 把 它 蔡 换 为 数字 0， 避 免 NaN 值 对 sortO 函 数 造成 错误 ， 对 于 日 期 类 型 ， 由 
于 表格 中 包含 的 值 不 完整 ， 需 要 根据 日 期 格式 对 其 补充 完整 。 
最 后 ， 根 据 列 数据 类 型 在 表格 的 列 标题 结构 中 添加 排序 的 类 标识 ， 如 下 所 示 : 
<table class="sortable"> 
<thead> 
<t> 
<th class="sort-numeric">ID</th> 
<th class="sort-alpha"> 产 品名 称 </th> | 
<th class="sort-numeric"> 标 准 成 本 </th> | 
| 


<th class="sort-numeric"> 列 出 价格 </th> 
<th class="sort-alpha"> 单 位 数量 </th> 
<th class="sort-numeric"> 最 小 再 订购 数量 </th> 
<th class="sort-alpha"> 类 别 </th> 
</t> 
</thead> 
</table> 


22.2.5 ”完善 视觉 交互 效果 


良好 的 视觉 体验 应 该 对 表格 的 动态 排序 进行 提示 , 只 有 这 样 用 户 才 觉 察 到 数据 排序 已 经 发 生 了 变 
化 。 这 里 有 两 个 问题 需要 读者 思考 : 

第 一 ， 应 该 即时 标识 排序 的 列 ， 以 及 排序 的 方式 。 

第 二 应 该 对 排序 列 数据 进行 高 亮 显示 ， 以 方便 用 户 阅 读 。 

根据 上 述 思 考 ， 可 以 通过 突出 显示 最 近 用 于 排序 的 列 ,把 用 户 的 注意 力 吸 引 到 很 可 能 包含 相关 信 
息 的 表格 部 分 。 既 然 已 经 知道 了 当前 列 在 表格 中 的 位 置 ， 因此 只 需要 为 当前 列 单元 格 添加 一 个 样式 类 
即 可 。 核 心 代码 如 下 : 

S$table.find('td").removeClass('sorted').filter(':nth-child( + (column + 1) + ")").addClass('sorted') 


在 上 面 代 码 中 ， 首 先 清除 表格 中 所 有 单元 格 中 包含 的 sorted 样式 类 ， 然 后 为 当前 列 单元 格 添加 
sorted 样式 类 ， 注 意 列 序号 的 调用 。 
与 排序 有 关 的 一 个 重要 视觉 设计 就 是 列 数据 的 升序 和 降序 ， 当 然 要 实现 降序 和 升序 的 切换 ， 可 以 
在 sort0 方 法 的 回调 函数 中 进行 切换 ， 我 们 只 需要 改变 返回 值 即 可 ， 这 里 通过 一 个 方向 变量 进行 动态 
控制 。 
rows.sort(function(a. b) { 
这 a.sortKey < b.sortKey) 








as 


区 ee ( 微 课 精 编 版 ) 
| Tetum -newDirection: 
| 这 a.sortKey > b.sortKey) 
| Teturn 0; 
全 Ff | D: 
| 如 果 newDirection 等 于 1， 则 按 正常 的 排序 方式 进行 排序 ， 如 果 等 于 -1， 则 切换 排序 方式 ， 实 现 
Note | 降序 排列 。 然 后 在 代码 初始 化 中 对 该 变量 进行 初始 化 声明 ， 并 适当 与 列 标题 的 sorted-ase 样式 类 进行 
| var newDirection = 1; 
| if($(this).is('.sorted-asc'")) { 
| newDirection = -1; 
| } 
| 
| 在 排序 处 理 之 后 ， 再 根据 这 个 临时 变量 为 列 标题 添加 对 应 的 样式 类 ， 同 时 应 该 清理 掉 其 他 列 中 绑 
， 定 的 升降 样式 类 。 
| S$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc"): 
| Var $sortHead = $table.find('th'").filter(':nth-child( + (column + 1) + ")"): 
| if(newDirection — 1) { 
| $sortHead.addClass('sorted-asc"): 
}else{ 
S$sortHead.addClass('sorted-desc"); 
} 


| 

| 最后， 整个 表格 排序 的 完整 代码 请 参考 本 节 示例 源 代码 。 

| 

22.3 表格 分 页 


数据 分 页 多 发 生 在 服务 器 端 ， 通 过 与 服务 器 端 交 互 ， 由 服务 器 控制 显示 的 页 数 和 分 页 数据 , 或 者 
| 通过 Ajax 完成 分 页 任务 。 本 节 主 要 介绍 如 何 使 用 JavaScript 实现 表格 分 页 的 方法 。 

| JavaScript 实现 分 页 仅 是 一 种 客户 端 特 效 ， 它 与 服务 器 端 分 页 有 着 本 质 不 同 。JavaScript 实现 分 页 
| 的 数据 实际 上 都 已 经 存在 于 客户 端 只 是 在 视觉 上 进行 隐藏 和 显示 处 理 , 而 服务 器 端 分 页 只 是 分 页 响 
| 应 数据 给 客户 端 。 下 面 介绍 如 何 通 过 JavaScript 对 浏览 器 中 的 已 经 存在 的 表格 进行 分 页 。 





| 【操作 步骤 】 
| 第 1 步 ， 先 从 显示 特定 数据 页 开始 ， 如 显示 表格 中 前 10 页 数据 〈 即 第 1 页 )， 实 现代 码 如 下 : 
S$(functionO| { 
SCtable paginated).each(functionO { 


var numPerPage = 10: 
Var S$table = $(this): 
S$table find('tbody tr) show0 
.slice(0. currentPage * numPerPage) 
| Jide0 
| -endO 
| .slice((currentPage + 1) * numPerPage) 
hide0 


' 
| 
| Var currentPage = 0: 
| 
| 
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-endO; 

D: | 

首先 ， 为 分 页 表格 绑 定 一 个 类 标识 (paginated)， 这 样 就 可 以 在 脚本 中 针对 SCtable paginated) 进 行 | 
处 理 。 这 里 有 两 个 控制 变量 : currentPage 指定 当前 显示 的 页 ， 从 0 开始 ; numPerPage 指定 每 页 要 显 | 
示 的 数据 行 。 

在 .each0 参 数 中 回调 函数 体内 的 this 指向 当前 表格 (table 元 素 )， 故 需要 使 用 $0 构造 函数 把 它 转 
换 为 jQuery 对 象 。 利用 tbody 元 素 作为 标识 符 , 把 标题 和 数据 行 分 离 出 来 , 使 用 show0 显 示 所 有 数据 | 
行 ， 然 后 调用 slice0 方 法 过 滤 出 指定 范围 前 的 数据 行 ， 并 把 它们 隐藏 起 来 ， 为 了 统一 操作 对 象 ， 在 调 | 
用 hide0 方 法 后 ， 调 用 end0 方 法 恢复 最 初 操作 的 jQuery 对 象 。 以 同样 的 方式 ， 隐 藏 特定 范围 后 面 的 | 
所 有 行 。 

第 2 步 ， 为 了 方便 用 户 选择 分 页 ， 还 需要 动态 设置 分 页 指示 按钮 ， 虽 然 使 用 超 链接 来 实现 分 页 指 
向 功能 ， 但 是 这 违反 了 JavaScript 动态 控制 的 原则 ， 反 而 让 超 链接 的 默认 行为 影响 用 户 操作 ， 容 易 导 
致 误 操作 。 为 此 这 里 通过 脚本 形式 动态 创建 几 个 DOM 元 素 ， 并 通过 数字 标识 分 页 向 导 。 

var numRows = Stable find(tbody tr ) length; 

var numPages = Math.ceil(numRows /numPerPage): 

Var $pager = ee 

for(var page = 0: page < numPages: paget+) 

和 

通过 数据 行 数 除 以 每 页 显示 的 行 数 ， 即 可 得 到 分 页 的 页 数 。 如 果 得 到 的 结果 不 是 整数 ， 必 须 使 用 
Math.ceil0 方 法 向 上 舍 入 ， 以 确保 显示 最 后 一 页 。 然 后 根据 这 个 数字 就 可 以 为 每 个 分 页 创建 导航 按钮 ， 
并 把 这 个 新 的 导航 按钮 附加 到 表格 前 面 ， 演 示 效 果 如 图 22.3 所 示 。 








图 22.3 分 页 导航 


第 3 步 ， 在 内 部 样式 表 中 设计 按钮 的 样式 ， 以 方便 用 户 操作 ， 其 中 样式 类 active 表示 当前 激活 的 | 
分 页 按钮 ， 此 时 的 按钮 演示 效果 如 图 22.4 所 示 。 

















22.4 分 页 导航 按钮 
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.page-number { padding: 0.2em 0.Sem: border: 1px solid #fEE cursor:pointer; display:inline-block: } 
.active { backeround: #ccf: border: 1px solid #006: } 


pa 第 4 步 ， 要 实现 分 页 导航 功能 ， 需 要 实现 动态 更 新 currentPage 变量 ， 同 时 运行 上 面 的 分 页 脚本 ， 
知 为 此 可 以 把 上 面 的 代码 封装 到 一 个 函数 中 ， 每 当 单 击 导航 按钮 时 ， 更 新 currentPage 变量 ， 并 调用 该 


| 函数 。 
在 循环 体 中 为 每 个 按钮 绑 定 click 事件 处 理 函 数 ， 由 于 创建 了 一 个 闭 包 体 ， 闭 包 体 内 引用 了 外 部 
| 的 currentPage 变量 ， 当 每 个 循环 改变 时 ， 该 变量 的 值 就 会 发 生变 化 ， 新 的 值 将 会 影响 到 每 个 按钮 上 
| 绑 定 的 闭 包 体 (elick 事件 处 理 函 数 )。 解 决 方法 : 使 用 jQuery 事件 对 象 添加 自 定义 数据 ， 该 数据 在 最 
| 终 调用 时 仍然 有 效 。 
| for(var page = 0; page < numPages: paget++) { 
| $('<span class="page-number">' + (page + 1) +'</span>").bind('click'. { 
| ‘newPage' : page 
}. function(event) { 
currentPage = event.data['newPage']: 
// 省 略 分 页 函数 
) 


| 在 for 循环 体内 为 每 个 导航 按钮 绑 定 一 个 click 事件 处 理 函 数 ， 并 通过 事件 对 象 的 data 属性 为 其 
| 传递 动态 的 当前 页 数值 ， 这 样 click 事件 处 理 函 数 所 形成 的 闭 包 体 就 不 再 直接 引用 外 部 的 变量 ， 而 是 
| 通过 事件 对 象 的 属性 来 获取 当前 页 信息 ， 从 而 避免 了 闭 包 的 缺陷 。 
| 第 5 步 ， 为 了 突出 显示 当前 页 ， 可 以 在 elick 事件 中 添加 一 行 代码 ， 为 当前 导航 按钮 添加 一 个 样 
| 式 类 ， 以 激活 当前 按钮 ， 方 便 用 户 浏览 。 
| for(var page = 0; page < numPages; paget++) { 
$('<span class="page-number">' + (page + 1) + '</span>").bind('click’, { 

| ‘newPage' : page 
| }, function(event) { 
| currentPage = event.data['newPage']: 

/省 略 分 页 函数 

S$(this).addClass(‘active').siblings().removeClass(‘active"): 
}).appendTo($pager).addClass('clickable’): 


| 本 


| 第 6 步 ， 最 后 需要 把 这 个 分 页 导航 插入 到 网 页 中 ， 同 时 把 分 页 函数 绑 定 到 repaginate 事件 处 理 函 
| 数 中 , 这 样 就 可 以 通过 Stable tigger(repaginate) 方 法 快速 调用 。 整 个 表格 分 页 功能 的 完整 代码 如 下 所 示 : 
SGunction0{ 

| S$Ctable.paginated).each(functionO { 

| Var currentPage = 0: 


var numPerPage = 10: 
Var $table = $(this): 
S$table.bind('repaginate'. fonctionO { 
| S$table.find('tbody tr).showO.slice(0. currentPage * numPerPage).hide(O.endO.slice((currentPage + 1) 
| * numPerPage).hideQ.endO: 
| 入 
| var numRows = Stable find(tbody tr') Jength: 
var numPages = Math.ceil(numRows / numPerPage): 
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Var $pager = $('<div class="pager"></div>"): 
for(var page = 0: page < numPages: paget++) { 
$(‘<span class="page-number">' + (page + 1) +'</span>").bind('click’, { 








Stable trigger(repaginate ); 
S$(this).addClass('active’).siblings().removeClass('active'): 
}).appendTo(Spager).addClass('clickable’): | 
} | 
$pagerfind('span.page-numberfirst).addClass(active): 
$pagerinsertBefore($table): 
S$table.trigger(repaginate); 





D; 
最 终 演示 效果 如 图 22.5 所 示 。 

















图 22.5 表格 分 页 导航 


22.4 表格 过 小 


当 表格 显示 大 量 数 据 时 ， 如 果 人 允许 用 户 根据 需要 仅 显 示 特定 内 容 的 数据 行 ， 能 够 提升 表格 的 
可 用 性 。 


22.4.1 快速 过 滤 
使 用 JavaScript 实现 表格 数据 过 滤 的 基本 功能 很 简单 ， 即 通过 检索 用 户 输入 的 关键 字 ， 把 
行 隐藏 或 者 显示 出 来 ， 没 有 被 匹配 的 行 显示 或 者 隐藏 起 来 。 


var elems =$('table filter’) find("tbody > tr") | 

elems each(functionO { | 
var elem =jQuery(this); | 
jQuery.uiTableFilter.has_words(getText(elem). words. false) ? matches(elem) : noMatch(elem): 











D; 


在 上 面 几 行 代码 中 ， 首 先 找到 要 检索 的 数据 行 ， 这 里 主要 是 根据 table 和 过 滤 类 确定 要 过 滤 的 表 
格 ， 并 根据 tbody 元 素 确定 检索 的 数据 行 。 遍 历数 据 行 ， 使 用 用 户 输入 的 过 滤 关 键 字 与 每 行 单元 格 数 | 
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| 据 进行 匹配 ， 如 果 返 回 tue， 则 执行 显示 操作 ， 和 否则 执行 隐藏 操作 。 其 中 getText0 是 一 个 内 部 函数 ， 
| 用 来 获取 指定 行 中 单元 格 包含 的 文本 。 

| ER 




















4 return elem textO) 
全 = | 
has_words0 是 数据 过 滤 插件 的 一 个 工具 函数 ,该 函数 主要 检测 用 户 输入 关键 字 与 数据 行文 本 是 否 
| 匹配， 代码 如 下 : 


jQuery.uiTableFilter.has_words = function(str, words, caseSensitive) { 
Var text = caseSensitive ? str : str.toLowerCase(): 
for(var i= 0; i < words.length; i++) { 
ifltext.indexOf(words[i]) —— -1) 
Teturn false; 
} 


return true; 


} 

该 工具 函数 首先 根据 一 个 caseSensitive 参数 ,确定 是 否 把 数据 行文 本 执行 小 写 转换 ,然后 遍历 用 
户 输入 的 关键 字数 组 ， 执 行 匹配 计算 ， 如 果 不 匹配 ， 则 返回 fglse， 否 则 返回 true。 

matches() 和 noMatch0 是 两 个 简单 的 显示 和 隐藏 数据 行内 部 函数 ， 代 码 如 下 : 


Var matches = function(elem) { 
elem.showO 





} 

var noMatch = function(elem) { 
elem.hideO:; 
new_hidden = true 

} 


22.4.2 ”多 关键 字 匹 配 


如 果 用 户 输入 多 个 关键 字 ， 则 数据 过 滤器 应 该 允许 对 多 个 关键 字 的 协同 处 理 ， 首 先 可 以 通过 
| JavaScript 的 split0 方 法 把 用 户 输入 的 短语 以 空格 符 为 分 隔 符 劈 开 ， 然 后 转换 为 数组 。 
Var Words = phrase.toLowerCase().split(" "): 
执行 数据 过 滤 的 事件 一 般 设置 为 键盘 松 开 时 触发 ， 当 用 户 在 搜索 框 中 输入 关键 字 时 , 会 即时 触发 
| 并 更 新 过 滤 数 据 。 为 了 避免 因为 用 户 输入 空格 键 而 触发 重复 的 数据 过 滤 操 作 , 可 以 设置 一 个 检测 条 件 ， 
| 当 输 入 字符 之 后 ， 去 除 最 后 一 个 空格 符 ， 如 果 等 于 上 次 输入 的 字符 ， 则 说 明 当 前 输入 的 是 空格 ， 可 以 
| 不 做 重复 检测 ， 这 样 就 能 够 提高 过 滤 效 率 。 
| if((words.size > 1) && (phrase.substr(0. phrase length - 1) — this.last phrase)) { 
| if(phrase[-1]—" ") { 

this.last_phrase = phrase: 

Teturn false: 

} 

| Var words = words[-1]: 
| // 获 取 可 见 数据 行 
| Var elems = jq.find("tbody > tr:visible") 
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在 上 面 代码 中 将 根据 用 户 输入 的 多 个 关键 字 进行 处 理 ， 关 键 字 之 间 通 过 空格 符 进 行 分 隔 ,， 同 时 当 
输入 最 新 关键 字 时 ， 代 码 只 处 理 可 视 的 数据 行 ， 对 于 已 经 隐藏 的 数据 行将 忽略 不 计 。 


22.4.3 ” 列 过 滤 


全 
在 过 滤器 函数 中 包含 一 个 列 参 数 ， 允 许 用 户 仅 就 特定 列 数据 进行 过 滤 ， 实 现 的 代码 如 下 : 
flcolumn) { 
var index = null: 


jq.find("thead > tr:last > th").each(function(?) { 
if($(this).text) 一 column) { 
index =i: 
Teturn false; | 
} | 
D); | 
iflindex 一 nulD) | 
throw ("given column: " + column + " not found") 
getText = function(elem) { 
Tetum jQuery(elen find(("td:eq(" + index + ")"))).textO | 
) 
| 
| 





} 
参数 column 表示 列 标题 代码 首先 遍历 表格 的 列 标题 ， 匹 配 参数 column 列 的 下 标 位 置 ， 然 后 利 | 
用 该 下 标 值 重 写 getTextO 内 部 函数 ， 执 行 匹配 操作 时 ， 仅 就 该 下 标 列 的 文本 进行 匹配 检测 。 | 





22.5 表格 编辑 





| 视频 讲 
表格 编辑 功能 主要 包括 : 数据 编辑 、 验 证 和 存储 。 本 节 将 主要 讲解 如 何 实现 表格 的 直接 编辑 , 不 | 
涉及 表格 编辑 后 的 输入 验证 和 存储 处 理 。 
当 用 户 单 击 单元 格 时 ， 单 元 格 显示 为 可 编辑 状态 ， 数 据 可 以 允许 删除 、 修 改 或 者 增加 。 
设计 思路 : 在 单元 格 的 click 事件 处 理 函数 中 获取 单元 格 数据 ， 动 态 创建 一 个 文本 框 ， 文 本 框 的 
值 为 单元 格 的 数据 ， 然 后 把 该 文本 框 嵌 入 到 单元 格 中 ， 并 清除 单元 格 中 的 原始 数据 。 | 
实现 代码 如 下 : 
var orig text = tdLtextO: | 
var Ww = td.width(); | 
var h = td.heightO:; 
td.css({ 
width : w + "px", | 
height :n+ "px 
padding : "0"、 | 
margin : "0" | 


了 

td.html(<form name="td-editor" action="javascript:void(0):">' + '<input type="text" name="td edit" value=" + 
tdtextO + " + ' style="margin:0px:padding:Opx:border:-O0px:width: ' + w + 'px:height: + h + 'px:">" + 
‘</input></form>"): 

在 上 述 代码 中 ， 首 先 保存 单元 格 原始 数据 ， 获 取 单元 格 的 高 度 和 宽度 ， 再 显 式 定义 单元 格 的 高 、 
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宽 和 清除 空 阶 ， 避 免 清除 原始 数据 后 单元 格 大 小 发 生变 化 。 然 后 使 用 html0 方 法 在 单元 格 中 绑 定 一 个 
<form> 和 <input> 标 签 ， 在 标签 内 部 通过 样式 属性 定义 输入 文本 框 的 大 小 与 单元 格 大 小 一 致 ， 并 清除 
间距 。 
全 | 当 数 据 编辑 完成 之 后 ， 需 要 把 文本 框 清除 掉 ， 并 使 用 编辑 后 的 值 更 新 单元 格 的 原始 值 。 实 现代 码 
oe | 如 下 : 


function restore(e) { 


| var val = td.find(':text').attr(‘value’) 
td.html(™); 
td.text(val); 


} 


在 执行 恢复 单元 格 数据 过 程 中 ， 可 以 预 留 两 个 接口 函数 ， 以 便 用 户 通过 参数 传递 功能 函数 ， 如 验 
证 或 数据 存储 操作 。 完 善 代码 如 下 : 
function restore(e) { 
var val = td.find(':text').attr(‘value') 
if(options.dataVerify) { 
var value = options.dataVerify.call(this, val, orig text, ©, td): 
if(value —= false) { 
return false; 


} 
if(value !(— null && value ! 一 undefined) 
| val = value: 
| 1 
| td.html(™"); 
td.text(vaD); 
这 options.editDone) 
options editDone(val, orig_text e. td) 
bind mouse down(td_ edit_ wrappen); 


options.dataVerify 作为 一 个 参数 ， 为 数据 验证 提供 接口 ， 只 有 当 验 证 函数 返回 值 为 tue 时 才 允 
许 编辑 操作 成 功 完成 ， 否 则 禁止 编辑 并 返回 。 
| options.editDone 也 是 一 个 参数 , 为 数据 编辑 完成 后 的 回调 函数 , 在 回调 函数 中 可 以 执行 一 些 附 
| 加 的 任务 或 者 功能 。 
| 当 完 成 数据 编辑 之 后 ， 需 要 调用 restore() 函 数 ， 把 数据 恢复 为 表格 数据 ， 并 清除 表单 元 素 。 此 
时 可 以 在 添加 的 表单 元 素 中 的 提交 、 鼠 标 按 下 、 失 去 焦点 等 事件 中 绑 定 restore0 函 数 。 
| td.html(<form name="td-editor" action="javascript:void(0):">" + '<input type="text" name="td_edit" value=" + 
| tditext) + ™ 十 style="margin:0px:padding:Opx:border:Opx:width: ' + w + 'px:height: + h + 'px:">' + 
| ‘</input></form>") -find('form'’).submit(restore).mousedown(restore).blur(restore): 


22.6 在 线 练 习 


练习 使 用 CSS 设计 各 种 网 页 表格 特效 样式 。 
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在 网 站 设计 中 表单 无 处 不 在 ， 从 登录 、 注 册 到 联系 表 、 调 查 表 ， 从 电 商 网 站 到 企业 首页 等 。 
表单 是 网 页 交互 的 工具 ， 是 浏览 者 与 服务 器 进行 通信 的 载体 。 设 计 专业 的 表单 能 金 提高 网 页 交 
互 的 效率 和 用 户 体验 。 本 章 将 通过 实例 讲解 如 何 使 用 JavaScript 和 jQuery 来 设计 出 具有 可 用 性 


的 优质 网 页 表单 


【 学 习 要 点 】 

WI 设计 易 用 性 表单 
PI 设计 表单 验证 

PI 增强 表单 交互 功能 


| f 末 ~、 LA ( 微 课 精 编 版 ) 


23.1 表单 开发 基础 


本 节 介 绍 如 何 使 用 JavaScript 快速 访问 表单 控件 ， 以 及 如 何 高 效 控制 表单 对 象 。 
e 
| 23.1.1 访问 表单 对 象 


表单 通过 <form> 标 签 定义 ， 在 HTML 文档 中 <form> 标 签 每 出 现 一 次 ，form 对 象 
就 会 被 创建 一 次 。form 对 象 属于 HTMLFormElement 类 型 ， 继 承 于 HTMLElement， 
HTMLFormElement 拥有 多 个 专 有 属性 ， 详 细 说 明 可 以 扫 码 了 解 。 

另外 ，form 对 象 还 提供 两 个 专用 方法 : 

reset(0: 将 所 有 表单 域 重 置 为 默认 值 。 

submit0: 提交 表单 。 
| 访问 form 对 象 的 方法 如 下 : 
| 方法 1: 使 用 DOM 的 document.getElementById0 方 法 获取 。 例 如 : 
| <form id="form1"></form> 

<script> 
Var form = document.getElementById("form1"); 
| </script> 
| 方法 2: 使 用 HTML 的 document.forms 集合 获取 。 例 如 : 
| <form id="form1" name="forml"></form> 
<form id="form?2" name="form?2"></form> 
<script> 
| var forml = document.forms[0]: 
| var forml = documentforms["form2"]:; 
| </scrip> 
| document.forms 表示 页 面 中 所 有 的 表单 对 象 集合 , 可 以 通过 数字 索引 或 name 值 取得 特定 的 表单 。 
| 注意， 可 以 同时 为 表单 指定 id 和 name 属性 ， 但 它们 的 值 不 一 定 相 同 。 


3 23.1.2 ”访问 表单 元 素 








视频 讲解 | 访问 表单 元 素 的 方法 如 下 : 
| 方法 1: 使 用 DOM 方法 访问 表单 元 素 ， 如 getElementById0 等 ， 详 细 说 明 可 参考 前 面 章节 有 关 
| DOM 内 容 。 


| 方法 2: 使 用 form 对 象 的 elements 属性 。 
| elements 集合 是 一 个 有 序列 表 , 包含 表单 中 的 所 有 字段 , 如 <input>、<textarea>、<button>、<select> 
， 和 <fieldset>。 每 个 表单 字段 在 elements 集合 中 的 顺序 ， 与 它们 在 表单 中 的 顺序 相同 。 
【示例 1】 可 以 按照 位 置 和 name 属性 来 访问 表单 元 素 。 
<form id="myform"> 
<h3> 反 馈 表 </h3> 
<fieldset> 
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<p> 姓 名 : <input class="special" type="text" name="name"></p> 
<p> 性 别 : 
<input type="radio” name="sex" value="0"> 男 
<input type="radio” name="sex" value="1"> 女 </p> 
<p> 邮 箱 : <input type="text" name="email"></p> 
<p> 网 址 : <input type="text" name="web"></p> 
<p> 反 馈 意见 : <textarea name="message" cols="30" rows="10"></textarea> </p> 


<p class="submit"> 
<button type="submit"> 提 交 表 单 </button> 
<p> 
</fieldset> 
</form> 
<script> 
Var form = document.getElementById(“myform"); 
var fieldl = form.elements[2]; // 通 过 下 标 位 置 找到 第 3 个 控件 ， 单 选 按钮 
var field2 = form.elements["name"]: // 通 过 name 找到 姓名 文本 框 
var fieldCount = form.elements.length; // 获 取 表单 字段 个 数 
</script> 


的 一 个 NodeList。 例 如 ， 以 上 面 HTML 代码 片段 为 例 。 
var form = document.getElementById("myform"): 


var sex = form.elements["sex"]; /1/ 获 取 单 选 按钮 组 

var field3 = form.elements[3]: // 获 取 第 4 个 字段 ， 即 第 1 个 单 选 按钮 
alert( sex.length): /返回 2 

alert( sex[1] 一 field3): /返回 tme 


在 这 个 表单 中 有 两 个 单 选 按钮 ， 它 们 的 name 都 是 "sex"， 意 味 着 这 两 个 字段 是 一 起 的 。 在 访问 
form.elements["sex"] 时 ， 就 会 返回 一 个 NodeList， 其 中 包含 这 两 个 元 素 。 如 果 访 问 form.elements[3]， 


只 会 返回 第 1 个 单 选 按钮 ， 与 包含 在 form.elements["sex"] 中 的 第 1 个 元 素 相同 。 
【示例 3】 也 可 以 通过 访问 表单 的 属性 来 访问 元 素 ， 上 面 代码 可 以 简化 为 下 面 代码 
var form = document.getElementById("myform"): 
Var sex = form["sex"]: 
var field3 = fomm[3]: 
alert( sex.length): 
alert( sex[1] 一 field3): 











【示例 2】 如 果 有 多 个 表单 控件 都 在 使 用 一 个 name， 如 单 选 按钮 ， 那 么 就 会 返回 以 该 name 命名 | 


这 些 属性 与 通过 elements 集合 访问 到 的 元 素 是 相同 的 。 但是， 建议 用 户 尽 可 能 使 用 elements， 通 | 


过 表单 属性 访问 元 素 只 是 为 了 兼容 早期 浏览 器 而 保留 的 一 种 过 渡 方式 。 
23.1.3 ”访问 字段 属性 


除了 fieldset 元 素 之 外 ， 所 有 表单 字段 都 拥有 相同 的 一 组 属性 。 简 单 说 明 如 下 : 
disabled: 布尔 值 ， 表 示 当 前 字段 是 否 被 禁用 。 

form: 只 读 ， 指 向 当前 字段 所 属 表单 对 象 。 

name: 当前 字段 的 名 称 。 

readOnly: 布尔 值 ， 表 示 当 前 字段 是 否 只 读 。 

tabIndex: 表示 当前 字段 的 切换 序号 (Tab 键 ) 。 


回回 加 加 加 
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| type: 当前 字段 的 类 型 ， 如 "checkbo"、"radio" 等 。 
| value: 当前 字段 将 被 提交 给 服务 器 的 值 。 对 文件 字段 来 说 ， 这 个 属性 是 只 读 的 ， 包 含 着 文 
| 件 在 计算 机 中 的 路 径 。 
全 及 | 除了 fbom 属性 外 ， 可 以 动态 修改 这 些 属性 值 ， 这 样 用 户 可 以 在 脚本 中 智能 控制 表单 的 表现 。 
人 【示例 1】 下 面 示例 以 23.1.2 节 的 反馈 表 结构 为 基础 ， 获 取 姓名 文本 框 ， 然 后 修改 其 值 ， 再 获取 
其 包含 的 表单 对 象 的 id 值 ， 然 后 让 当前 文本 框 获取 焦点 、 禁 用 状态 ， 同 时 设置 为 复 选 框 
| <form id="myform” method="post" action="javascriptalert( 表 单 提交 啦 !)"> 
| <h3> 反 馈 表 </h3> 
<fieldset> 
| <p> 姓 名 : <input class="special" type="text" name="name"></p> 
| <p> 性 别 : 
| <input type="radio” name="sex" value="0"> 男 
| 





<input type="radio" name="sex" value="1"> 女 </p> 
<p> 邮 箱 : <input type="text" name="email"></p> 
<p> 网 址 : <input type="text" name="web"></p> 
<p> 反 馈 意见 : <textarea name="message" cols="30" rows="10"></textarea> </p> 
<p class="submit"> 
<button type="submit" name="submit"> 提 交 表 单 </button> 
<p> 
</fieldset> 
</form> 


var field = form.elements["name"]; 

field.value = "输入 姓名 ": 

alert(field.form.id): 

field.focus(); 

field.disabled = true: 

field.type = "checkbox"; 

</scrip> 
| 【示例 2】 以 示例 1 为 基础 ， 下 面 示例 设计 当 用 户 提交 表单 后 ， 禁 用 提交 按钮 ， 同 时 修改 提交 按 
| 钮 的 显示 文本 ， 如 图 23.1 所 示 。 


| 

| 

| 

| 

| 
| var form = document.getElementById("myform"): 
| 

| 

| 

| 

| 

| 





图 23.1 禁用 提交 按钮 
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Var form = document.getElementById("myform"): 

var field = form.elements["name"]: | 

form.onsubmit = function(e){ | 
Var event=e€||window.event: | 
Var target = event.target || event.srcElement:: | 图 
Var btn = target.elements["submit"]; | 


证 te 
btniinnerHTML = "已 经 提交 ， 不 可 重复 操作 | Nie 
} | 


上 面 代 码 为 表单 的 submit 事件 绑 定 了 一 个 事件 处 理 程序 。 事 件 触 发 后 ， 代 码 取 得 了 提交 按钮 并 
将 其 disabled 属性 设置 为 tue。 注意, 不 能 使 用 click 事件 处 理 程序 来 实现 这 个 功能 ， 因 为 部 分 浏览 器 | 
会 在 触发 表单 的 submit 事件 之 前 触发 click 事件 , 而 有 的 浏览 器 则 相反 。 对 于 先 触发 click 事件 的 浏览 
器 ， 意 味 着 会 在 提交 发 生 之 前 禁用 按钮 ， 结 果 永 远 都 不 会 提交 表单 。 因 此 ， 最 好 是 通过 submit 事件 | 
来 禁用 提交 按钮 。 不 过 ， 这 种 方式 不 适合 表单 中 不 包含 提交 按钮 的 情况 。 


23.1.4 ”访问 文本 框 的 值 


HTML 文本 框 有 两 种 形式 : 

使 用 <input> 标 签 定义 的 单行 文本 框 。 

回 “ 使 用 <textarea> 标 签 定义 的 多 行文 本 框 。 

这 两 个 控件 的 外 观 和 行为 差不多 ， 不 同 点 比较 如 下 : | 

定义 单行 文本 框 使 用 <input type="text">， 通 过 size 属性 设置 文本 框 可 显示 字符 数 ， 通 过 value 属 | 
性 设置 文本 框 的 初始 值 ， 通 过 maxlength 属性 设置 文本 框 可 以 接收 的 最 大 字符 数 。 例 如 ， 定 义 文本 框 
显示 25 个 字符 ， 不 能 超过 50 个 字符 。 

<input type="text" size="25" maxlength="50" value=" 初 始 值 "> 


定义 多 行文 本 框 使 用 <textarea> 标 签 ， 使 用 rows 和 cols 属性 可 以 设置 文本 框 显示 的 行 数 和 列 数 。 
多 行文 本 框 的 初始 值 必须 放 在 <textarea> 和 </textarea> 之 间 ， 没 有 最 大 字符 数 限制 。 
<textarea rows="5" cols="25"> 初 始 值 </textarea> 
【示例 1) 不 管 是 单行 文本 框 ， 还 是 多 行文 本 框 ， 在 JavaScript 中 使 用 value 属性 可 以 读 取 和 设置 | 
文本 框 的 值 。 | 


<form id="myform" method="post" action"javascript:alert(' 表 单 提交 啦 !)"> | 
<input type="text" size="25" maxlength="50" value=" 初 始 值 "> | 
1 











<textarea rows="5" cols="25"> 初 始 值 </textarea> 
</form> 
<script> 


var form = document.getElementById("myform"): 

var fieldl = form.elements[0]: 

var field2 = form.elements[1]: 

alert(fieldl.value): 

alert(field2.value): 

/script> | 

在 脚本 中 建议 使 用 value 属性 读 取 或 设置 文本 框 的 值 , 不 建议 使 用 DOM 的 setAttribute0 方 法 设置 | 
<input> 和 <textarea> 的 值 ， 因 为 对 value 属性 所 做 的 修改 不 一 定 会 反映 在 DOM 中 。 人 
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| 【示例 2】 使 用 select0 可 以 选择 文本 框 中 的 值 ， 该 方法 不 接收 参数 。 在 调用 select0 方 法 时 ， 大 

| 多 数 浏 览 器 (Opera 除外 ) 都 会 将 焦点 设置 到 文本 框 中 。 
| var form = document.getElementById("myform"): 

食 凡 | | var fieldl = form.elements[0]; 

ym var field2 = form.elements[1]: 


fieldl.onfocus = functionO{ 
Re 


| 加 本 
| field2.onfocus = fonction0{ 
this.selectO: 
} 


| 
| 
| 在 上 面 示例 中 只 要 文本 框 获 得 焦点 就 会 选择 其 中 所 有 的 文本 ， 这 可 以 提升 表单 的 易 用 性 。 
| HTMLS5 新 增 两 个 属性 : selectionStart 和 selectionEnd， 这 两 个 属性 保存 文本 选区 开头 和 结尾 的 偏 
| 移 量 。IE 9+、Firefox、Safari、Chrome 和 Opera 都 支持 这 两 个 属性 。IE 8 及 之 前 版 本 不 支持 这 两 个 属 
| 性 ， 而 是 定义 document.selection 对 象 ， 保 存 着 用 户 在 整个 文档 范围 内 选择 的 文本 信息 。 
| 【示例 3】 下 面 示例 定义 一 个 工具 函数 getSelectedText0， 用 来 获取 指定 文本 框 中 选择 的 文本 。 
function getSelectedText(textbox){ 
if (typeof textbox.selectionStart 一 "number"){ 
return textbox.value.substring(textbox.selectionStart, 
textbox.selectionEnd); 
| } else if (document.selection){ 
| Teturn document.selection.createRange().text: 
| } 


} 
然后 ， 就 可 以 在 JavaScript 脚本 中 调用 该 函数 获取 指定 文本 框 的 选择 文本 。 
| <form id="myform" method="post" action="#)"> 
| <textarea rows="5" cols="25"> 初 始 值 </textarea> 
| </form> 
<script> 
Var form = document.getElementById("“myform"): 
| var fieldl = form.elements[0]: 
| fieldl.onselect = fonction0O{ 
| alert(getSelectedText(this)): 
| } 
</script> 
| 如 果 选 择 部 分 文本 ,可 以 使 用 HTMLS5 的 setSelectionRange() 方 法 ， 该 方法 接收 两 个 参数 ， 分 别 设 
| 置 选择 的 第 一 个 字符 的 索引 和 要 选择 的 最 后 一 个 字符 之 后 的 字符 的 索引 ， 与 substring0 方 法 的 两 个 参 
| 数 相同 。 
| IE 9+、Firefox、Safari、Chrome 和 Opera 都 支持 这 个 用 法 。IE 8 及 更 早 版 本 支持 使 用 范围 选择 部 
| 分 文本 。 先 使 用 createTextRange0 方 法 创建 一 个 范围 ， 然 后 使 用 collapse(true) 折 又 范围 ， 再 使 用 
，moveStart0 和 moveEnd0 方 法 将 范围 移动 到 位 ， 最 后 使 用 范围 的 select0 方 法 选择 文本 。 
【示例 4】 下 面 示例 定义 一 个 工具 函数 selectText0， 用 来 选择 指定 范围 的 文本 。 


function selectText(textbox. startIndex. stopIndex){ 
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if (textbox.setSelectionRange){ 
textbox.setSelectionRange(startIndex. stopIndex): 

} else if (textbox.createTextRange){ 
Var range = textbox.createTextRange(): 
Tange.collapse(true); 
Tange.moveStart("character", startIndex): 
Tange.moveEnd("character". stopIndex - startIndex):; 
Tange.selectO: 

} 

textbox.focus0: 


selectText0 函 数 接收 3 个 参数 : 要 操作 的 文本 框 、 要 选择 文 


本 中 第 一 个 字符 的 索引 、 要 选择 文本 中 最 后 一 个 字符 之 后 的 索引 。 
首先 ， 先 检测 文本 框 是 否 包 含 setSelectionRange0 方 法 ， 如 果 有 ， 
则 使 用 该 方法 ， 和 否则， 检测 文本 框 是 否 支持 createTextRange() 方 
法 ， 如 果 支 持 ， 则 通过 创建 范围 来 实现 选择 ， 最 后 ， 就 是 为 文本 
框 设置 焦点 ， 以 便 用 户 看 到 文本 框 中 选择 的 文本 。 


Se Mahon 

















然后 ， 就 可 以 在 JavaScript 脚本 中 调用 该 函数 获取 指定 文本 图 23.2 选择 部 分 文本 
框 的 部 分 文本 ， 如 图 23.2 所 示 。 


<form id="myform" method="post" action="#)"> 











<textarea rows="5" cols="25"> 月 落 乌 啼 霜 满 天 ， 江 枫 渔 火 对 悉 卢 。( 张 继 《 枫 桥 夜 泊 》) 


莫 悉 前 路 无 知己 ， 天 下 谁 人 不 识 君 。( 高 适 《 别 董 大 》) ”</textarea> 
</form> 

<script> 

Var form = document.getElementById("myform"): 

var fieldl = form.elements[0]: 

fieldl.onfocus = functionO{ 


} 


selectText(this., 0, 16): 


</script> 


23.1.5 ”访问 选择 框 的 值 


使 用 <select> 和 <option> 标 签 可 以 创建 选择 框 ，select 属于 HTMLSelectElement 类 型 ， 继 承 于 | 视频 讲 





HIMLElement， 除 了 拥有 表单 字段 公共 属性 和 方法 外 ， 还 定义 了 下 列 专用 属性 和 方法 。 
Multiple: 布尔 值 ， 设 置 或 返回 是 否 可 有 多 个 选项 被 选中 ， 等 价 于 <select multiple>。Opera9 | 


加 


回回 罗 加 加 


无 法 在 脚本 中 设置 该 属性 ， 仅 能 返回 值 。 

selectedIndex: 设置 或 返回 被 选 选项 的 索引 号 ， 如 果 没 有 选中 项 ， 则 值 为 -1。 对 于 支持 多 选 
的 控件 ， 只 保存 选中 项 中 第 一 项 的 索引 。 

size: 设置 或 返回 一 次 显示 的 选项 ， 等 价 于 <select size="4" >。 

length: 返回 选项 的 数目 。 

options: 返回 包含 所 有 选项 的 控件 集合 ， 即 包含 所 有 option 元 素 的 HIMLCollection 。 
add(option, before): 向 控件 中 插入 新 option 元 素 ， 其 位 置 在 before 参数 之 前 。 
Temove(index): 移 除 给 定位 置 的 选项 。 
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| 选择 框 的 type 属性 值 为 "select-one" 或 "select-multiple"， 这 取决 于 multiple 属性 值 。 
”选择 框 的 value 属性 由 当前 选中 项 决定 ， 具 体 说 明 如 下 : 
| 如 果 没 有 选中 的 项 ， 则 选择 框 的 value 属性 保存 空 字符 串 。 
食 内 | 如 果 有 一 个 选中 项 ， 而 且 该 项 的 value 属性 值 已 经 在 HTML 中 指定 ， 则 选择 框 的 value 属性 
| 等 于 选中 项 的 value 属性 值 。 即 使 value 特性 的 值 是 空 字符 串 ， 也 同样 遵循 此 条 规则 。 
vote | 如 果 有 一 个 选中 项 ， 但 该 项 的 value 特性 在 HTML 中 未 指定 ， 则 选择 框 的 value 属性 等 于 该 
项 包含 的 文本 。 
回 ”如 果 选 中 多 个 项 ， 则 选择 框 的 value 属性 将 依据 前 两 条 规则 取得 第 一 个 选中 项 的 值 。 
【示例 1】 设 计 下 拉 列 表 框 。 
<form id="myform" method="post" action="#"> 
<select name="grade" id="grade"> 
<option value="1"> 初 级 </option> 
<option value="2"> 中 级 </option> 
<option value="3"> 高 级 </option> 
<option value=""> 未 知 </option> 
<option> 不 明确 </option> 
</select> 
</form> 


然后 使 用 下 面 JavaScript 代码 读 取 列表 框 的 值 。 
Var form = oe ny 


grade.onchange = functionO{ 
console.log(" 被 选中 项 目 : " + this.options[this.selectedIndex].outerHTML + ", select.value = "+ this.value); 
} 


在 浏览 器 中 测试 ， 分 别 选择 不 同 的 项 目 ， 则 可 以 看 到 选择 框 对 应 的 值 ， 如 图 23.3 所 示 。 





图 23.3 ”测试 选择 框 的 值 


| 如 果 用 户 选择 了 其 中 第 一 项 ， 则 选择 框 的 值 就 是 1。 如 果 文 本 为 “未 知 ”的 选项 被 选中 ， 则 选择 
| 框 的 值 就 是 一 个 空 字符 串 ， 因 为 其 value 属性 值 是 空 的 。 如 果 选 择 了 最 后 一 项 ， 由 于 <option> 没 有 指 
| 定 value 属性 ， 则 选择 框 的 值 就 是 “不 明确 ”。 

| 使 用 <option> 标 签 可 以 创建 选择 项 目 ， 它 属于 HTMLOptionElement 类 型 ，HTMLOptionElement 
对 象 添加 如 下 列 属性 ， 以 方便 访问 数据 。 

| 回 index: 返回 当前 选项 在 options 集合 中 的 索引 。 
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label: 设置 或 返回 选项 的 标签 ， 等 价 于 <option label=" 提 示 文 本 ">。 
selected: 布尔 值 ， 设 置 或 返回 当前 选项 的 selected 属性 值 ， 表 示 当 前 选项 是 否 被 选中 。 | 
text: 设置 或 返回 选项 的 文本 值 。 | 
value: 设置 或 返回 选项 的 值 ， 等 价 于 <option value="2">。 | 
其 中 大 部 分 属性 都 是 为 了 方便 对 选项 数据 的 访问 , 虽然 可 以 使 用 DOM 进行 访问 , 但 效率 比较 低 ，| 
建议 采用 选择 框 及 其 项 目的 专 有 属性 进行 访问 。 


Ai 注意， 不同 浏览 器 下 选项 的 value 属性 返回 值 存在 差别 : 在 未 设置 value 属性 的 情况 下 ， 下 8 会 | 
返回 空 字符 串 ， 而 IE 9+、Safari、Firefox、Chrome 和 Opera 则 会 返回 包含 的 文本 值 。 | 


【示例 2】 对 于 只 允许 选择 一 项 的 选择 框 ， 访 问 选中 项 的 代码 如 下 : 


Var form = document.getElementById(“myform"): 
Var grade = form.elements["grade"]: 
grade.onchange = functionO{ 
Var selIndex = grade.selectedIndex: 
var selOption = grade.options[selIndex]: 
console.log(" index: " +grade.selectedIndex + "\ntext: " + selOption.text + "\nvalue: "+ grade.value): 





加 回回 加 








} 


对 于 可 以 选择 多 项 的 选择 框 ，selectedIndex 属性 无 效 。 设 置 selectedIndex 会 导致 取消 以 前 的 所 有 
选项 并 选择 指定 的 那 一 项 ， 而 读 取 selectedIndex 则 只 会 返回 选中 项 中 第 一 项 的 索引 值 。 | 
与 selectedIndex 不 同 ， 在 允许 多 选 的 选择 框 中 设置 选项 的 selected 属性 ， 不 会 取消 对 其 他 选中 项 | 
的 选择 ， 因 而 可 以 动态 选中 任意 多 个 项 。 但 是 ， 如 果 是 在 单 选 选择 框 中 ， 修 改 某 个 选项 的 selected 属 | 
性 则 会 取消 对 其 他 选项 的 选择 。 需 要 注意 的 是 ， 将 selected 属性 设置 为 false 对 单 选 选 择 框 没 有 影响 。 | 
【示例 3】 获 取 所 有 选中 的 项 ， 可 以 循环 遍历 选项 集合 ， 然 后 测试 每 个 选项 的 selected 属性 。 | 
第 1 步 ， 设 计 一 个 多 选 列表 框 。 | 
<form id="myform" action="#"> 
<label for="color"> 选 择 你 喜欢 的 颜色 : </label> | 
<selectname="clolr' size="5" multiple id="clolr"> | 
<option value="red"> 红 </option> | 
<option value="orange"> 橙 </option> 
<option value="yellow"> 黄 </option> 
<option value="green"> 绿 </option> 
<option value="blue"> 蓝 </option> | 
</select> | 
<button id="btn" name="btn"> 确 定 </button> | 
</form> 


第 2 步 ， 定 义 一 个 工具 函数 ， 用 来 获取 所 有 被 选中 的 选择 框 中 的 选项 。 


function getSelectedOptions(selectbox){ 
var result = new ArrayO: 
Var option = mull: 
for (var i=0. len=selectbox.options.length: i < len: i++){ 
option = selectbox.options[i]: 
if(option.selected){ 
Tesult.push(option): 


} 
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| 
} 
| Tetum result: 
| 
食 内 | 这 个 函数 可 以 返回 给 定 选择 框 中 选中 项 的 一 个 数组 。 首 先 ， 创 建 一 个 将 包含 选中 项 的 数组 ， 然 后 


| 使 用 for 循环 帮 代 所 有 选项 , 同时 检测 每 一 项 的 selected 属性 。 如 果 有 选项 被 选中 , 则 将 其 添加 到 result 
数组 中 。 最 后 ， 返 回 包含 选中 项 的 数组 。 
| 第 3 步 ， 使 用 getSelectedOptions0 〇 函数 取得 选中 项 。 


| 
| Var form = document.getElementById("myform"): 
| var clolr = form.elements["clolr"]: 
| var btn = form.elements["btn"]: 
| btn.onclick = fonctionO{ 
| Var selectedOptions = getSelectedOptions(cloln); 
| Var message =""; 
| for (var i=0, len=selectedOptions.length; i < len: i++){ 
| message += selectedOptions[i].index + " text: " + selectedOptions[il.text + " value: " + 
selectedOptions[i].value + "\n": 

| 

console.log(message); 

Tetum false; 

} 


第 4 步 ， 在 浏览 器 中 预览 ， 从 选择 框 中 取得 多 个 选项 ， 单 击 按钮 显示 效果 如 图 23.4 所 示 。 
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图 23.4 ”测试 选择 框 的 值 
23.1.6 ”编辑 选项 


| 使 用 JavaScript 可 以 动态 创建 选项 ， 并 将 它们 添加 到 选择 框 中 。 添 加 选项 的 方式 有 很 多 ， 下 面 以 
| 示例 形式 简单 介绍 。 
【示例 1】 使 用 DOM 方法 为 选择 框 添加 选项 。 

| <fom id="myform" method="post" action="#"> 
| <select name="grade" id="grade"> 
| <option value="1"> 初 级 </option> 
| <option value="2"> 中 级 </option> 

<option value="3"> 高 级 </option> 
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</select><br><br> | 
<button id="btn" name="btn" type="button" > 添加 选项 </button> | 
</form> | 
<script> | 和 
var form = document.getElementById(“myform"): | 儒生 
var grade = form.elements["grade"]: | ee 
var btn = form.elements["btn"]; 
btn.onclick = functionO{ 
var newOption = document.createElement("option"); | 
newOption.appendChild(document.createTextNode(" 特 级 ")); | 
newOption.setAttribute("value", "4"); 
grade.appendChild(newOption): 
this.disabled = true; 
this.innerHTML = "添加 完毕 "; 
Teturn 人 false; 





} 
</scrip> | 
以 上 代码 创建 了 一 个 新 的 option 元 素 ， 然 后 为 它 添加 了 一 个 文本 节点 ， 并 设置 value 属性 值 ， 最 | 
后 将 它 添加 到 了 选择 框 中 。 添 加 到 选择 框 之 后 ， 就 可 以 看 到 新 选项 。 | 
【示例 2】 使 用 Option0 构 造 函 数 创建 新 选项 ， 它 包含 两 个 参数 : 文本 (text) 和 值 (value)， 第 | 
二 个 参数 可 选 。 | 
btn.onclick = functionO{ 
var newOption = new Option(" 特 级 ","4"); 
grade.appendChild(newOption); 
this.disabled = true; 
this.innerHTML = "添加 完毕 "; 
return false: 


} | 
Option0 构 造 函 数 会 创建 一 个 option 实例 ， 然 后 使 用 appendChild0 将 新 选项 添加 到 选择 框 中 。 | 


| 
4 所 注意 这 种 方式 在 除 焉 之 外 的 浏览 器 中 都 可 以 使 用 。 由 于 存在 bug， 下 在 这 种 方式 下 不 能 正确 | 
设置 新 选项 的 文本 。 | 


【示例 3】 使 用 选择 框 的 add0 方 法 ， 该 方法 包含 两 个 参数 : 第 一 个 参数 为 添加 的 新 选项 , 第 二 个 | 
参数 为 将 位 于 新 选项 之 后 的 选项 。 如 果 想 在 列表 最 后 添加 一 个 选项 ， 应 该 将 第 二 个 参数 设置 为 null。 


btn.onclick = functionO{ 

var newOption = new Option(" 特 级 ","4"); 

grade.add(newOption.undefined): 

this.disabled = true: 

thisinnerHTML = "添加 完毕 ": | 

return false: | 
| 


} 
党 提示 : 在 正 浏览 器 中 ，add0 方 法 的 第 二 个 参数 是 可 选 的 ， 为 新 选项 之 后 选项 的 索引 .兼容 DOM 
的 浏览 器 要求 必须 指定 第 二 个 参数 。 如果 要 兼容 不 同 浏览 器 ， 可 以 为 第 二 个 参数 传 入 | 
undefined， 就 可 以 在 所 有 浏览 器 中 都 将 新 选项 插入 到 列表 最 后 。 如 果 想 将 新 选项 添加 到 其 | 

国 
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他 位 置 ， 应 使 用 DOM 的 insertBefore0 方 法 。 
使 用 DOM 的 removeChild0 方 法 可 以 移 除 选项 ， 也 可 以 使 用 选择 框 的 remove( 方 法 ， 该 方 
法 包含 一 个 参数 ， 即 要 移 除 选项 的 索引 。 另 外 ， 将 选项 设置 为 nnll， 也 可 以 删除 。 


攻克 【示例 4】 下 面 示例 演示 如 何 清除 选择 框 中 所 有 的 项 ， 当 单 击 按钮 后 ， 将 途 代 所 有 选项 并 逐个 移 


| Pe 
除 它 们 。 
| bin.onclick = functionO{ 
for(var i=0, len=grade.optionslength: i < len: i++){ 
grade.remove(0); 
} 
| this.disabled = true; 
| this.innerHTML = "已 全 部 删除 ": 
| Tetum 人 false: 


| 在 迭代 过 程 中 ,每 次 只 移 除 选择 框 的 第 一 个 选项 。 由 于 移 除 第 一 个 选项 后 ， 所 有 后 续 选项 都 会 自 
| 动向 上 移动 一 个 位 置 ， 因 此 重复 移 除 第 一 个 选项 就 可 以 移 除 所 有 选项 。 

| 使 用 DOM 的 appendChild() 方 法 可 以 将 一 个 选择 框 中 的 选项 直接 移动 到 另 一 个 选择 框 中 。 如 果 为 
| appendChild() 方 法 传 入 文档 元 素 ， 那 么 就 会 先 将 该 元 素 从 父 节 点 中 移 除 ， 再 把 它 添加 到 指定 的 位 置 。 
| 【示例 5】 下 面 示例 设计 当 在 第 一 个 选择 框 选 择 一 个 项 目 后 ， 把 该 项 目 移 到 第 二 个 选择 框 中 。 


<form id="myform" method="post" action="#"> 
| ‘<select name="gradel" id="gradel"> 
| <option value="1"> 初 级 </option> 
| <option value="2"> 中 级 </option> 
<option value="3"> 高 级 </option> 
</select><br><br> 
‘<select name="grade2" id="grade2"></select> 

</form> 
<script> 
Var form = document.getElementById("“myform"): 
Var gradel = form.elements["gradel"]: 
var grade2 = form .elements["grade2"]: 
| gradel.onchange = functionO{ 
| grade2.appendChild(grade1.options[gradel.selectedIndex]): 
| } 

</scrip> 
| 移动 选项 与 移 除 选项 有 一 个 共同 之 处 ， 都 会 重 置 每 一 个 选项 的 index 属性 。 重 排 选 项 次 序 的 过 程 
| 也 十 分 类 似 ， 最 好 的 方式 是 使 用 DOM 方法 。 
| 要 将 选择 框 中 的 某 一 项 移动 到 特定 位 置 ， 建 议 使 用 DOM 的 insertBefore0 方 法 。appendChild0 方 
| 法 适用 于 将 选项 添加 到 选择 框 的 最 后 。 
| 【示例 6】 下 面 示例 设计 当 在 选择 框 中 选择 一 个 项 目 后 ， 会 把 该 项 目 在 选择 框 中 向 前 移动 一 个 选 
“项 的 位 置 。 


<form id="myform" method="post" action="#"> 
<select name="grade" id="grade"> 
<option value="1">1 级 </option> 
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<option value="2">2 级 </option> 
<option value="3">3 级 </option> | 
<option value="4">4 级 </option> | 
<option value="5">5 级 </option> | 
<option value="6">6 级 </option> | 全 7 
‘</select> | Am 
</form> 
<script> | 
var form = document.getElementById("myform"): | 
Var grade = form.elements["grade"]: | 
grade.onchange = functionO{ 

Var option = grade.options[grade.selectedIndex]: 

grade.insertBefore(option, grade.options[option.index-1]); 





} 
</scrip> 
上 面 代码 首先 选择 了 要 移动 的 选项 ， 然 后 将 其 插入 到 排 在 它 前 面 的 选项 之 前 。 
4《 抽 注意 :在 选择 框 选项 编辑 中 ,但 7 存在 页 面 重 绘 问题 ， 有 时 候 会 导致 使用 DOM 方法 重 排 的 选项 
不 能 马上 正确 显示 。 | 


23.2 案例 实战 


本 节 将 通过 一 个 案例 演示 如 何 让 表单 更 可 用 、 更 好 用 。 
23.2.1 设计 表单 结构 


好 用 的 表单 应 该 从 结构 设计 开始 ， 在 没有 CSS 和 JavaScript 支持 下 ， 让 表单 结构 趋 于 完善 、 功 能 | 
健全 ， 然 后 再 考虑 使 用 CSS 和 JavaScript 改善 表单 设计 。 记 住 渐进 增强 的 设计 原则 : 努力 为 大 部 分 用 | 
户 提供 额外 功能 外 ， 还 应 该 照顾 全 体 用 户 的 基本 需求 。 | 

【示例 】 下 面 示例 将 创建 一 个 联系 表 ， 用 来 与 用 户 建立 联系 。 通过 对 表单 外 观 和 行为 做 渐进 性 增 | 
强 ， 直 观 认识 表单 设计 的 可 用 性 的 基本 方法 。 

示例 完整 代码 请 参考 本 节 示 例 源 代码 ， 演 示 效 果 如 图 23.5 所 示 。 
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图 23.5 设计 联系 表单 

在 本 例 代码 中 , 每 个 表单 控件 都 包含 在 一 个 列表 项 (<l> ) 中 , 最 后 都 包含 在 一 个 有 序列 表 (<ol>) | 

中 ， 而 复 选 框 以 及 对 应 的 文本 字段 被 包含 在 一 个 嵌 套 的 无 序列 表 (<ul>) 中 。 使 用 <label> 标 签 标 出 每 | 

个 字段 的 名 称 , 对 于 文本 字段 , <label> 标 签 放 在 <input> 标 签 前 面 ; 对 于 复 选 框 , <label> 标 签 包含 <input> | 
标签 。 L 
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本 例 主 要 从 3 个 方面 增强 表单 的 可 用 性 : 

修改 DOM， 以 便 灵活 地 为 <legend> 元 素 应 用 样式 。 

把 必 填 的 字段 提示 信息 改 为 星 号 , 把 特殊 字段 修改 为 双星 号 。 将 这 两 个 必 填 字段 的 标签 修改 
仿 站 | 为 粗 体 字 ， 同 时 在 表单 前 面 添加 星 号 和 双星 号 注释 文字 。 

| 在 页 面 加 载 时 隐藏 每 个 复 选 框 对 应 的 文本 输入 框 , 当 用 户 选择 或 者 取消 复 选 框 时 能 够 动态 切 


Jote | 换 这 些 文本 框 ， 让 它们 显示 或 者 隐藏 。 


23.2.2 ”设计 分 组 标题 





| <legend> 标 签 表示 为 fieldset 分 组 元 素 定义 标题 ， 该 标签 在 不 同 浏览 器 中 解析 效果 存在 差异 。 本 
| 例 通 过 JavaScript 把 页 面 中 的 每 个 <legend> 标 签 移出 ， 换 成 标题 标签 。 
| 【操作 步骤 】 
| 第 1 步 ， 在 页 面 <head> 内 使 用 <script> 导 入 jQuery 库 文件 。 
<sScTipt src="jquery/jquery-3.1.1.js" type="text/javascript"></script> 
第 2 步 ， 继 续 在 <head> 内 使 用 <scrip 人 > 定义 JavaScript 代码 块 ， 输 入 下 面 JavaScript 代码 。 
$(function|) { 
S$('fieldset').each(function(index) { 
Var heading = $(legend', this) removeO.textO: 


视频 讲 





D 


使 用 each0 方 法 遍历 文档 中 所 有 的 <legend> 标 签 ,使 用 text0 方 法 获取 该 标签 包含 的 文本 ， 然后 把 
<legend> 标 签 移出 文档 。 由 于 文档 中 包含 多 个 表单 ， 每 个 表单 可 能 包含 多 个 <legend> 标 签 ， 因 此 简单 
| 使 用 jQuery 的 隐 式 和 迭代 机 制 。 同 时 要 注意 ， 由 于 每 次 迭代 一 个 <fieldsee> 标 签 都 会 设置 一 个 变量 
| heading， 故 需要 使 用 this 关键 字 限 制 匹配 的 范围 ， 以 确保 每 次 只 取得 一 个 <legend> 标 签 中 的 文本 。 
| 第 3 步 , 创 建 n3 元 素 ,把 它 插 入 到 每 个 <fieldset> 标 签 的 开始 位 置 , 同时 把 保存 到 临时 变量 heading 
| 中 的 标题 信息 放 入 其 中 。 演 示 效 果 如 图 23.6 所 示 。 


| 
| 
| 
| 
} 
| 
| 
| 
| 














S$('fieldset).each(function(index) { 
Var heading = $('legend'. this).remove( .textO:; 
$(<h3></h3>") 


.text(heading) 
‘prependTo(this): 


个 人 信息 
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图 23.6 设计 表单 分 组 标题 
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23.2.3 ”设计 提示 信息 


为 了 增加 对 必 填 字段 的 控制 ， 通 过 required 类 统一 控制 必 填 字 段 样 式 和 行为 。 | 视频 讲解 
框 都 添加 conditional 类 ， 以 便 对 这 些 文本 框 进行 控制 。 











【操作 步骤 】 | 
第 1 步 ， 以 23.2.2 节 示例 的 JavaScript 脚本 为 基础 ， 继 续 输入 下 面 代码 。 
$(functionO) { | 
/1 设置 必 填 提示 信息 | 
var requiredFlag = 


var requiredKey = SCinput, Tequired:first).next(span').textO: 

requiredKey = requiredFlag + requiredKey.replace(/\((.+))$/,"$1"):; 

/设置 必 写 提示 信息 

Var conditionalFlag =" ** 

Var conditionalKey = $(input.conditional:first’).next('span').textO:; 

conditionalKey = conditionalFlag + conditionalKey.replace(\((.+))/."$1"): 

/附加 信息 

SCfommn :input).filter(required) | 

next('span') .text(requiredFlag).end() | 
| 
| 


.prev('label").addClass('req-label); 

S$(form :input).filter(.conditional) 

.next('span').text(conditionalFlag); 
D) 


在 上 面 代码 中 先 设 置 两 个 变量 ， 分 别 用 来 存储 对 应 的 提示 星 号 ， 并 利用 它们 组 合 新 的 提示 信息 
由 于 星 号 很 难 吸引 用 户 的 注意 力 ， 还 应 该 为 它们 添加 加 粗 样式 ， 即 通过 prev0 方 法 获取 前 面 的 span 
标签 ， 并 为 它 绑 定 一 个 样式 类 req-label， 并 为 req-label 样式 类 声明 .req-label { font-weight:bold;)。 
第 2 步 ， 为 了 方便 选择 <label> 标 签 ， 在 上 面 代 码 行 中 调用 end0 方 法 恢复 上 -次 选择 器 所 匹配 的 | 
jQuery 对 象 ， 即 从 .next(span) 匹 配 的 span 元 素 返 回 到 上 一 步 的 filter('required) 匹 配 的 input 文本 框 ， | 
只 有 这 样 ，prev(Clabel) 才 能 够 找到 文本 框 前 面 的 span 元 素 。 在 生成 保存 的 提示 信息 之 前 ,还 应 该 把 原 
始 提示 信 息 保存 到 变量 中 ， 并 通过 正则 表达 式 去 掉 前 后 的 括号 ， 效 果 如 图 23.7 所 示 。 | 
第 3 步 ， 最 后 尝试 把 原始 提示 信息 和 标记 符号 一 同 放 到 表单 的 上 面 ， 以 方便 进行 注释 。 


$CfunctionO { 

S$Cfieldset).each(fonction(index) { 

var heading = $(legend'. this)TemoveO.textO: 

$('<h3></h3>") 

.text(heading) 

prependTo(this): 
DD: 
var requiredFlag =" *'; | 
Var requiredKey = $('input.required:first).next('span').textO; | 
requiredKey = requiredFlag + requiredKey.replace(/^\((.+))$/."$1"): | 
Var conditionalFlag =" ** 
Var conditionalKey = $Cinput.conditional:first).next(span ).textO: 
conditionalKey = conditionalFlag + conditionalKey.replace(\((.+)\)/."$1"): 
SCform :input’).filter(' .required') 
next('span’) {ext(requiredFlag).endO 
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tt text(conditionalFlag): 
// 添 加 注释 信息 


| -addClass('field -keys') 
vote .append(requiredKey + '<br />") 
-append(conditionalKey) 
| .insertBefore('#contact’); 
| D 
| 


在 上 面 代码 中 ， 首 先 创建 一 个 p 元 素 ， 为 该 标签 添加 field-keys 样式 类 ， 将 requiredKey 和 
conditionalKey 变量 存储 的 信息 附加 到 该 标签 中 ， 最 后 将 该 段落 标签 添加 到 联系 表单 的 前 面 ， 演 示 效 

















果 如 图 23.8 所 示 。 
《4 局 加 
LS I we Wi 

| 个 人 信息 

3 me : ed 

= 

图 23.7 设计 必 填 信息 图 23.8 ”添加 注释 信息 

| 23.2.4 ”设计 条 件 字段 

视频 讲解 te 才 会 显示 该 复 选 框 后 面 的 文本 框 ， 要 求 输入 信息 。 


第 1 步 ， 以 23.2.3 节 示例 的 JavaScript 脚本 为 基础 ， 继 续 输入 下 面 代码 。 首 先 ， 隐 藏 所 有 的 文本 
框 ， 此 时 演示 效果 如 图 23.9 所 示 。 


S('input.conditional’).hideO.next('span').hideO: 


| 

| “ 必 填 

| 下 当 义 李 而 冬 计 柜 后 ， 则 必 贷 寺 写 
| 

| 


个 人 信息 
上 趟 名 


2 邮箱 
和 RR 本 本村 了 








23.9 ”隐藏 文本 字段 


第 2 步 ， 为 复 选 框 添加 click 事件 ， 当 选中 复 选 框 时 显示 对 应 的 文本 框 ， 在 执行 过 程 中 还 应 该 检 
| 测 复生 是 否 被 选中 ， 如 果 被 选中 ， 则 显示 文本 框 ， 否 则 就 不 能 够 显示 。 
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$Cinputconditional).hideO.each(function0O { 
var $thisInput = $(this); 
Var SthisFlag = $thisInput.next('span').hide(): 





SthisFlag.hide(); 
S(this).parent('label’).removeClass('req-label’): 


站 

»; 

在 上 面 代码 中 ， 先 保存 当前 文本 输入 字段 和 当前 标记 的 变量 ， 当 用 户 单 击 复 选 框 时 ,检查 复 选 框 | 
是 否 被 选中 , 如 果 选 中 , 则 显示 文本 框 , 显示 提示 标记 , 并 为 父 元 素 <label> 标 签 添加 req-label 样式 类 ， | 
加 粗 显示 标签 文本 。 

一 般 在 检测 复 选 框 时 ， 可 以 通过 在 each0 方 法 的 回调 函数 中 使 用 this 关键 字 ， 可 以 直接 访问 当前 | 
DOM 节点 ， 如 果 不 能 够 访问 DOM 节点 ， 则 可 以 使 用 SCselector).is(:checked) 来 代 蔡 ， 因 为 is0 方 法 返 | 
回 值 为 布尔 值 。 如 果 复 选 框 被 取消 选中 ， 则 应 该 隐藏 文本 框 字段 ， 并 清除 父 元 素 的 req-label 样式 类 。 | 

| 
| 
| 
| 
| 


演示 效果 如 图 23.10 所 示 。 | 
第 3 步 , 最 后 使 用 CSS 在 内 部 样式 表 中 定义 简单 的 样式 , 适当 美化 联系 表单 , 演示 效果 如 图 23.11 
所 示 。 


<style type="text/css"> 

-Teq-label { font-weight:bold: } 

h3 { background:#3CF: margin:0: padding:0.3em 0.5em: } 

UL ol { list-style-type:none: padding:0.Sem: margin:0: } | 
ul { margin-left:1.5em: } | 
li { margin:4px: } | 
#contact { position:relative: } 

P { position:absolute; Tight:lem: top:2em: background:#CFC: padding:lem: } 

</style> 
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图 23.10 显示 条 件 文本 字段 图 23.11 美化 后 的 联系 表单 样式 
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”23.2.5 表单 验证 


表单 验证 包括 必 填 检查 、 范 围 校 验 、 比 较 验 证 、 格 式 验证 、 特 殊 验 证 。 
| 必 填 检查 是 最 基本 的 任务 。 常规 设计 中 包括 3 种 状态 : 输入 框 获取 焦点 提示 ， 输 入 框 失去 焦点 验 
证 错误 提示 ， 输 入 框 失去 焦点 验证 正确 提示 。 首 先 确定 输入 框 是 否 是 必 填 项 ， 然 后 就 是 提示 消息 的 显 
示 位 置 。 

范围 校 验 稍微 复杂 一 些 ， 在 校 验 中 需要 做 如 下 区 分 : 输入 的 数据 类 型 为 字符 串 、 数 字 和 时 间 。 如 
| 果 是 字符 串 ， 则 比较 字符 串 的 长 短 ， 对 数字 和 时 间 来 说 ， 则 比较 值 的 大 小 。 
比较 验证 相对 简单 ， 无 须 考虑 输入 内 容 ， 只 需要 引入 一 个 正则 表达 式 就 可 以 了 。 
格式 验证 和 特殊 验证 都 必须 通过 正则 表达 式 才能 够 完成 。 
1. 必 填 字段 验证 


| 

| 

| 

| 

| 

| 

| 

| 以 23.2.4 节 示 例 为 基础 ， 在 联系 表单 中 设计 当 用 户 按 下 Tab 键 ， 或 者 在 输入 字段 外 单 击 时 ， 
| JavaScript 能 够 检查 每 个 必 填 字段 是 否 为 空 。 
| 为 了 简化 演示 ， 可 以 为 必 填 字段 添加 required 类 ， 当 必 填 字段 被 隐藏 后 ， 将 移 除 这 些 类 。 有 了 
| required 类 后 , 就 可 以 在 用 户 没有 填写 字段 时 给 出 提示 , 这 些 提示 信息 被 动态 添加 到 对 应 字段 的 后 面 ， 
| 并 定义 waming 类 ， 以 便 统一 设计 提示 信息 样式 。 
| (S(this)is(.required)) { 

| var $listItem = $(this).parents('li:first); 
| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 

| 











f(this.value —") { 
var errorMessage = ' 必 须 填 写 ': 
if (S(this).is('.conditional’)) { 
errorMessage =' 当 勾 选 了 前 面 复 选 框 后 ,' + errorMessage; 


上 面 代码 将 在 每 个 表单 输入 字段 后 发 生 blur 事件 ,检测 required 类 ,然后 检查 空 字符 串 , 如果 都 为 true， 
则 提示 错误 信息 ， 并 把 这 个 错误 信息 添加 到 父 元 素 中 。 如 果 想 对 条 件 文本 字段 进行 检测 ， 并 显示 不 
| 同 的 提示 信息 , 则 可 以 在 对 应 的 复 选 框 被 选中 后 显示 对 应 的 错误 提示 信息 , 演示 效果 如 图 23.12 所 示 。 
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姓名 区 





5 * 必 六 
3 *" 当 信和 前 而 复 艺 框 后， 则 必须 村 











邮箱 "必须 
如 何 保持 联系 ? 至 少 选 择 一 种 ) 


Email … 当 各 过 了 前 再 复述 本 后 必 且 十 写 
口 电话 








图 23.12 检测 必 填 字段 
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< 所 注 意 : 要 考虑 到 当 用 户 取消 选中 复 选 框 之 后 ， 能 够 自动 取消 错误 提示 信息 ， 或 者 当 用 户 再 次 填写 
信息 时 ， 能 够 自动 清除 这 个 提示 信息 。 
2. 格式 验证 | 内 
格式 验证 包括 电子 邮件 、 电 话 和 信用 卡 等 ， 格 式 验证 需要 用 到 正则 表达 式 。 下 面 示例 以 电子 邮件 | 了 
的 格式 化 验证 为 例 进 行 说 明 。 
f($(this).is(#email)) { | 
var $listItem = $(this).parents('li:first): | 
f(this.value !=" && !/+@.+\ [a-zA-2]{2,4}$/ test(this.value)) { | 
Var errorMessage = ' 电 子 邮件 格式 不 正确 '; 








| 
| 
| 
| 
| 
| 
在 上 面 代码 中 ， 首 先 检测 电子 邮件 字段 ， 然 后 把 父 列表 项 保存 到 一 个 变量 中 ， 再 用 两 个 条 件 检测 | 
该 值 是 否 为 宅 ， 以 及 是 否 匹配 正则 表达 式 。 如 果 检测 成 功 ,将 创建 一 个 错误 信息 ,将 这 条 信息 插入 到 | 
<span> 标 签 ， 并 把 错误 信息 和 标签 添加 到 父 列表 项 中 ， 同 时 为 父 列表 项 添加 waming 类 。 
设计 正则 表达 式 时 ， 为 了 使 检测 更 精确 ， 需 要 查找 电子 邮件 中 的 “@” 和 “.” 这 两 个 特殊 字符 | 
标识 ， 以 及 “.” 字 符 后 面 应 该 有 2 一 4 个 字符 来 表示 域名 扩展 符 。 演 示 效 果 如 图 23.12 所 示 。 
| 

| 

| 


四 -| 三 to/ocahosta080/mste/ 221 - B 


十 名 [一 一 一]* 必 H : 
邮箱 |23525234 = 电子 邮件 格式 不 正确 ”” 当 匆 先前 面 复 选 框 后 ， 则 必须 填写 
如 何 保持 联系 ? (至 少 选择 一 种 ) 





| 
口 Email | 
口 电话 | 
Dee 





图 23.13 ”检测 格式 


考虑 到 每 次 验证 时 ， 用 户 可 能 补 写 信息 ， 此 时 代码 应 该 即时 擦 除 对 应 的 错误 提示 信息 ， 因此 在 这 | 
两 段 代码 前 面 对 错 误 提示 信息 进行 清扫 ， 避 免 一 旦 出 现 错误 信息 时 就 一 直 显 示 。 | 


SCform :input)-blurGfunctionO { | 
S$(this).parents('li:first’).removeClass(‘warning’) | 
.find('span.error-message').remove(): | 
if ($(this)is( .required)) { 

var $listItem = $(this) parents(li:first7: 
if (this.value —") { 
Var errorMessage 一 ' 必 须 填写 ': | 
if (S(this) is( .conditional)) { | 
errorMessage = ' 当 选中 了 前 面 复 选 框 后 . + errorMessage; 人 


*。503。 


名 A 从 入 门 到 精通 ( 微 课 精 编 版 ) 


| » 
| $C<span></span>) 
| .addClass(error-message) 
| ‘text(errorMessage) 
全 内 | .appendTo($listItem); 
~ SlistItem.addClass(‘warning’): 
号 
| 让 (SGthis)is(#email)) { 


Var SlistItem = $(this).parents('li:first’); 
if (this.value (=" && 1/.+@.+\[a-zA-Z]{2,4}$/.test(this.value)) { 
var errorMessage =' 电 子 邮件 格式 不 正确 '; 
$(<span></span>") 
.addClass(error-message) 
‘text(errorMessage) 
.appendTo(S$listItem); 
SlistItem.addClass(‘warning’): 


到 
EB 
D:; 


3. 提交 检测 


就 没有 接触 这 些 字 段 ， 而 直接 提交 表单 ， 那 么 就 会 发 生 很 多 问题 。 因 此 ， 有 必要 在 用 户 提交 表单 时 ， 
对 整个 表单 的 信息 进行 一 次 检测 ， 防 止 错 填 或 者 漏 填 。 
在 表单 的 submit0 事 件 处 理 函 数 中 ， 先 移 除 不 存在 的 元 素 ， 然 后 在 后 面 再 动态 添加 ， 因 为 这 些 信 
息 都 是 动态 显示 的 .在 触发 blur 事件 之 后 ,获取 当前 表单 中 包含 的 warning 类 的 总 数 , 如果 存在 warning 
类 ， 就 创建 一 个 新 的 id 为 submit-message 的 <div> 标 签 ， 并 把 它 插入 到 提交 按钮 的 前 面 ， 方 便 阅读 ， 
最 后 阻止 表单 提交 。 
S$(form").submit(function() { 
$(#submit-message').remove(): 
$(:input.required').trigger('blur’); 
| var numWarnings = $(.waming’, this).length: 
| if (numWarnings) { 
| var fieldList = []: 
$('.waming label).each(fomnctionO { 
fieldListpush(S(this)textO): 


D 
| .append(' 请 重新 填写 下 面 '+ numWarnings +' 个 字段 :<br />") 
| .append('&bull: ' + fieldListjoin(<br />&bull: )) 
| -insertBefore(#send): 
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Teturn false: 
上 | 
D; | 
在 上 面 代码 中 ， 首 先 定 义 一 个 空 数组 fieldList， 然 后 去 掉 每 个 带 warming 类 的 元 素 的 后 代 <label> 全 
标签 , 将 该 标签 中 的 文本 使 用 JavaScript 本 地 push 函数 推 到 fieldList 数组 中 ,这 样 每 个 标签 中 的 文本 全 一 
就 构成 了 fieldList 数组 中 的 一 个 独立 元 素 。 Note 
然后 ,修改 submit-message 元 素 ,将 fieldList 数 组 中 的 内 容 添加 到 这 个 <div> 标 签 中 ,并 使 JavaScript | 
本 地 函数 join0 将 数组 转换 为 字符 串 ， 将 每 个 数组 元 素 与 一 个 换行 符 和 一 个 圆 点 符号 连接 在 一 起 。 这 
个 HTML 标记 只 是 显示 而 不 具有 语义 性 ， 而 且 可 以 随时 废弃 ，B 因此 不 需要 过 分 考虑 动态 信息 的 语义 | 
结构 问题 ， 效 果 如 图 23.14 所 示 。 | 
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必 诊 
:必须 二 中 当 久 达 闻 面 复 夺 杠 后 ， 则 必须 坟 写 





邮箱 

如 何 保持 联系 ? 
口 Email 
电话 ““ 当 幻 达 了 前 面 复 这 框 后 .必须 后 写 
Daa 

请 重新 填写 下 面 3 个 字 让 

， 姓 名 


Ii 
| 
| 
| 
姓名 * 必 须 境 写 日 | 
| 
| 
| 





2 
图 23.14 ”提交 检测 示例 效果 


23.3 在 线 练 司 





练习 使 用 CSS3 设计 各 种 网 页 表单 特效 。 
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第 销 磊 
综合 实战 


本 章 从 零 开 始 ， 讲 解 了 购物 网 站 、 专 题 页 、 电 子 相 册 、 在 线 记 事 本 4 个 项 目的 实现 过 程 。 
前 端 开发 主要 涉及 网 站 结构 、 网 页 效果 以 及 页 面 交 互 功能 实现 ， 需 要 事 握 的 基本 工具 包括 
HIML、CSS 和 JavaScript， 本 章 还 需要 读者 了 解 jQuery 的 使 用 ， jQuery 是 JavaScript 代码 库 ， 
不 熟悉 的 读者 可 以 参考 第 18.7 节 线 上 内 容 
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24.1 购物 网 站 策划 


本 案例 是 一 个 购物 网 站 ， 网 站 的 用 途 是 向 年 轻 网 民 提供 时 尚 服装 、 首 饰 和 玩具 等 商品 。 既然 面向 ， 
的 客户 群 是 年 轻 的 一 代 ， 那 么 网 站 应 该 给 人 一 种 很 时 尚 的 感觉 。 因此 ， 需 要 给 网 站 增加 一 些 与 众 不 同 
的 交互 功能 来 吸引 客户 。 


| 
本 案例 能 够 根据 商品 分 类 进行 显示 ， 并 根据 分 类 显示 记录 . 在 浏览 中 浏览 痢 能 够 与 页 面 进行 多 区 
块 动态 互动 ， 网 站 首页 模板 效果 如 图 24.1 所 示 ， 详 细 页 模板 效果 如 图 24.2 所 示 。 











24.2 ”网 站 详细 页 效果 = 

整个 示例 以 HTML+CSS+JavaScripttjQuery 技术 混合 进行 开发 ， 遵 循 结构 、 表 现 、 逻 辑 和 数据 完 | 

全 分 离 的 原则 进行 设计 。 | 
回 ”结构 层 由 HTML 负责 ， 在 结构 内 不 包含 其 他 层 代码 。 


| 
| 
| 
\ 
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| 回 ” 表 现 层 完 全 独立 ， 并 实现 表现 动态 样式 控制 。 
| 回 罗 和 辑 层 使 用 JavaScripttjQuery 技术 配合 进行 开发 ,充分 发 挥 各 自 优势 ,以 实现 最 优化 代码 纺 
| 辑 原则 。 

| 本 示例 不 需要 后 台 服务 器 技术 的 支持 , 因此 对 于 广大 初学 者 来 说 , 可 以 在 本 地 或 远程 上 自由 进行 
调试 和 运行 。 


24.2 设计 网 站 结构 


| 首先 准备 好 搭建 本 网 站 的 基本 素材 。 例 如 ， 各 种 产品 的 种 类 、 产 品 的 介绍 性 文字 、 图 片 和 价格 等 
| 信息 。 现 在 的 任务 就 是 把 这 些 素材 合理 整合 ， 创 建 一 个 令 人 和 舒适、 愉悦 的 网 站 。 
本 案例 比较 复杂 ， 在 开发 之 前 ， 应 先 梳 理 一 下 整个 案例 的 数据 结构 以 及 所 要 达到 的 目的 。 


24 .2.1 定义 文件 结构 


每 个 网 站 或 多 或 少 都 会 用 到 图 片 、 样 式 表 和 JavaScript 脚本 ， 因 此 在 开始 创建 该 网 站 之 前 ， 需 要 
对 文件 夹 结构 进行 以 下 设计 。 本 网 站 模板 包含 如 下 文件 夹 : 

images 文件 夹 : 用 来 存放 将 要 用 到 的 图 片 。 

styles 文件 夹 : 用 来 存放 网 站 所 需要 的 CSS 样式 表 。 

scripts 文件 夹 : 用 来 存放 网 站 所 需要 的 jQuery 脚本 。 

本 例 功 能 主要 为 展示 商品 和 针对 商品 的 详细 介绍 ， 因 此 只 要 做 两 个 页 面 ， 即 首页 (index.html) 
和 商品 详细 页 (detail.html)。 


24.2.2 ”定义 网 页 结构 


购物 网 站 基本 上 可 以 分 为 下 面 3 个 部 分 。 

头 部 : 相当 于 网 站 的 品牌 ， 可 用 于 放置 Logo 标志 和 通 往 各 个 页 面 的 链接 等 。 

内 容 : 放置 页 面 的 主体 内 容 。 

底部 : 放置 页 面 其 他 链接 和 版 权 信息 等 。 

本 案例 网 站 也 不 例外 , 首先 把 网 站 的 主体 结构 用 <div> 标 签 表示 出 来 。<div> 标 签 的 id 属性 值 分 别 
为 header、content 和 footer，HTML 代码 请 参考 本 章 示例 源 代码 中 index.html 文件 。 

这 是 一 个 通用 的 模板 ， 网 站 首页 (index.html) 和 产品 详细 页 (detaiLhtml) 都 可 以 使 用 该 模板 。 
有 了 这 个 基本 的 结构 后 ， 接 下 来 的 工作 就 是 把 相关 的 内 容 分 别 插入 到 各 个 页 面 。 


24.2.3 ”设计 效果 图 


现在 已 经 知道 该 网 站 每 个 页 面 的 大 概 结构 ， 再 加 上 网 站 的 原始 素材 ， 接 下 来 就 可 以 着 手 设计 这 些 
页 面 效 果 。 使 用 Photoshop 完成 这 项 工作 ， 两 个 页 面 的 设计 效果 如 图 24.1 和 图 24.2 所 示 ， 由 于 本 案 
例 不 涉及 页 面 设计 过 程 ， 具 体操 作 就 不 再 展开 。 页 面 最 终 效果 确定 下 来 之 后 ， 就 可 以 进行 CSS 代码 
设计 了 。 
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24.3 设计 网 站 样式 


在 编写 CSS 之 前 ， 应 把 网 站 的 HTML 代码 全 部 写 出 来 ， 然 后 就 可 以 编写 网 站 的 CSS 样式 了 。 
24.3.1 网 站 样式 分 类 


网 站 不 仅 要 有 一 个 基本 的 HTML 模板 ， 而 且 还 需要 有 设计 好 的 网 站 视觉 效果 ， 因 此 接 下 来 的 任 
务 就 是 让 HTML 模板 以 网 页 形式 呈现 出 来 ， 为 了 达到 目的 ， 需 要 为 模板 编写 CSS 代码 。 | 

本 例 把 所 有 的 CSS 代码 都 写 在 同一 个 文件 里 , 这 样 只 需要 在 页 面 的 <head> 标 签 内 插入 一 个 <link> | 视频 讲解 
标签 就 可 以 了 。 代 码 如 下 : 

<link rel="stylesheet" href="styles/reset.css" type="text/css" /> 


对 于 CSS 的 编写 ， 每 个 人 的 思路 和 写法 都 不 同 。 推 荐 方法 : 先 编写 全 局 样式 ， 然 后 编写 可 大 范 | 
围 重 用 的 样式 ， 最 后 编写 细节 方面 的 样式 。 这 样 ， 根 据 CSS 的 最 近 优先 级 规则 ， 就 可 以 很 容易 对 网 | 
站 进行 从 整体 到 细节 样式 的 定义 。 | 

本 案例 整个 网 站 定义 了 如 下 5 个 样式 表 : | 

reset.css: 重 置 样式 表 。 | 
box.css: 模 态 对 话 框 样式 表 。 
main.css: 主体 样式 表 。 | 
thickbox.css: 表格 框 样式 表 。 | 
skin.css: 皮肤 样式 表 。 | 

这 些 样式 表 放置 在 网 站 根 目 录 下 styles 文件 夹 中 ， 其 中 皮肤 样式 表 全 部 放置 在 子 目 录 styles/skin | 
中 ， 皮 肤 样式 表 包 括 : skin_0.css〈 蓝 色 系 )、skin_l.css (紫色 系 )、skin 2.css (红色 系 )、skin 3.css | 
(天 蓝 色 系 )、skin 4.css〈 橙 色 系 ) 和 skin 5$.css 〈 淡 绿色 系 )。 | 


24.3.2 编写 全 局 样式 0 





加 加 回回 网 





使 用 Dreamweaver 新 建文 本 文件 ， 保 存 为 styles/reset.css， 在 该 样式 党 
表 文 件 中 将 定义 全 局 样式 ， 重 置 网 页 标签 基本 样式 。 详 细 代码 请 读者 扫 码 。 国 呈 寺 计 | 上 
了 解 。 线 上 阅读 视频 讲解 
首先 ， 使 用 元 素 标签 将 每 个 元 素 的 margin 和 padding 属性 都 设置 为 0。 这 样 做 的 好 处 是 ， 可 以 让 页 面 | 
不 受到 不 同 浏览 器 默认 设置 的 页 边 距 和 字 边 距 的 影响 。 
然后 ， 设 置 <body> 标 签 的 字体 颜色 、 字 号 大 小 等 ， 这 样 可 以 规范 整个 网 站 的 样式 风格 。 | 
最 后 ,设置 其 他 元 素 的 特定 样式 。 读 者 可 自行 查阅 CSS 手册 ， 了 解 每 个 属性 的 基本 用 法 。 关 于 重 | | 
置 样式 ， 读 者 也 可 以 参考 Eric Meyer 的 重 置 样式 表 和 YUI 的 重 置 样式 表 。 | 
| 


24.3.3 ”编写 可 重用 样式 


网 站 的 两 个 页 面 (index.html 和 detaiLhtml) 都 拥有 头 部 和 商品 推荐 
部 分 。 因 此 ， 头 部 和 商品 推荐 部 分 的 两 个 样式 表 是 可 以 重用 的 。 详 细 代 
码 请 读者 扫 码 了 解 。 线 上 阅读 
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| 24. 3.4 编写 网 站 首页 主体 布局 


办 本 节 介绍 网 站 首页 的 主体 样式 设计 过 程 。 详 细 代 码 请 读者 扫 码 了 解 。 


i 
| 24.3.5 ”编写 详细 页 主体 布局 


详细 页 (detailhtml) 的 头 部 和 左 侧 样式 与 首页 (index.html) 一 样 ， 
因此 只 需要 修改 内 容 右 侧 即 可 。 下 面 介绍 网 站 详细 页 的 主体 样式 设计 过 
程 。 详 细 代码 请 读者 扫描 了 解 。 

此 时 ， 网 站 所 需 的 两 个 页 面 的 样式 都 已 经 完成 ， 与 之 前 设计 的 效果 
图 一 致 ， 接 下 来 将 用 jQuery 给 网 站 添加 主要 交互 功能 。 








24.4 设计 首页 交互 行为 


开始 编写 jQuery 代码 之 前 ， 读 者 需要 先 确定 页 面 应 该 完成 哪些 功能 。 在 网 站 首页 (index.html) 
上 将 完成 如 下 功能 。 


24.4.1 搜索 框 文字 效果 


| 搜索 框 默认 会 有 提示 文字 ， 如 “请 输入 商品 名 称 ”， 当 光 标定 位 在 搜索 框 内 时 ， 需 要 将 提示 文字 
| 去 掉 ， 当 光标 移 开 时 ， 如 果 用 户 未 填写 任何 内 容 ， 需 要 把 提示 文字 恢复 ， 同 时 添加 回 车 提交 的 效果 。 
| 新建 JavaSeript 文件 ， 保 存 为 nputjs， 然 后 输入 下 面 代码 : 
$(function 0 {/* 搜索 文本 框 效果 */ 

$("#inputSearch").focus(function O { 

$(this).addClass("focus"): 

| if ($(this).val| 一 this.defaultValue) { 
| S(this).val(™"): 
| 





.blur(function | { 
S(this).removeClass("focus"): 
if($(this).val) =—=") { 

S$(this).val(this.defaultValue): 


Dkeyup(function (e) { 
ff(ewhich— 13) { 

alert( 回 车 提交 表单 !): 
} 


| 
| } 
| 
I 
)》 


| 
| 
| ) 
| 
| 
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仿 广 
24.4.2 ”网 页 换 肤 






网 页 换 肤 的 设计 原理 就 是 通过 调用 不 同 的 样式 表 文 件 来 实现 不 同 的 皮肤 切换 , 并 且 需 要 将 换 好 的 | 


| 
| 视频 讲解 
皮肤 记 入 Cookie 中 ， 这 样 用 户 下 次 访问 时 就 可 以 显示 用 户 自 定 义 的 皮肤 了 。 | f 
【操作 步骤 】 





第 1 步 ， 首 先 设置 HTML 结构 ， 在 网 页 中 添加 皮肤 选择 按钮 (<1> 标 签 )， 代 码 如 下 : 
<ul id="skin"> | 
<liid="skin_0" title=" 蓝 色 " class="selected"> 蓝 色 </li> | 
<liid="skin_1" title=" 紫 色 "> 紫 色 </li> 
<liid="skin_ 2" title=" 红 色 "> 红 色 </li> 
<liid="skin_ 3" tile=" 天 蓝 色 "> 天 蓝 色 </li> 
<liid="skin 4"title=" 梅 色 "> 栖 色 </i> 
<liid="skin_5" tile=" 淡 绿色 "> 淡 绿 色 </li> 
<lul> 
第 2 步 ， 根 据 HTML 代码 预定 义 几 套 换 肤 用 的 样式 表 ， 分 别 有 蓝 色 、 紫 色 、 红 色 等 6 套 ， 默认 | 
是 蓝 色 ， 这 些 样式 表 分 别 存储 在 styles/skin 目录 下 。 | 
第 3 步 ， 为 HTML 代码 添加 样式 。 注意， 在 HTML 文档 中 要 使 用 <link> 标 签 定义 一 个 带 这 的 样 | 
式 表 链 接 ， 通 过 操作 该 链接 的 href 属性 的 值 ， 从 而 实现 换 肤 。 代 码 如 下 所 示 : | 
<link rel="stylesheet" href="styles/skin/skin 0.css" type="text/css" id="cssfile" /> | 





第 4 步 ， 新 建 JavaScript 文件 ， 保 存 为 changeSkinjs， 输 入 下 面 代码 ， 为 皮肤 选择 按钮 添加 单 击 
事件 。 

Var $li =$("#skin 1i"); 

Sli.click(functionO{ 

switchSkin( this.id ): 

D: 

本 例 脚 本 需要 完成 的 任务 包含 如 下 两 个 步骤 : | 

回 ” 当 皮 肤 选择 按钮 被 单 击 后 ， 当 前 皮肤 就 被 选中 。 | 

回 ”将 网 页 内 容 换 肤 。 

第 5 步 ， 前 面 为 <link> 标 签 设置 id， 此 时 可 以 通过 attr() 方 法 为 <link> 标 签 的 href 属性 设置 不 
同 的 值 。 

第 6 步 ， 完 成 后 ， 当 单 击 皮肤 选择 按钮 时 ， 就 可 以 切换 网 页 皮肤 了 ， 但 是 当 用 户 刷新 网 页 或 者 关 
闭 浏览 器 后 ， 皮 肤 又 会 被 初始 化 ， 因 此 需要 将 当前 选择 的 皮肤 进行 保存 。 

第 7 步 ， 本 例 需要 引入 jquery.cookiejs 插件 。 该 插件 能 简化 Cookie 的 操作 ， 此 处 就 将 其 引入 。 
代码 如 下 所 示 : 

‘<script src="scripts/jquery.cookie.js" type="text/javascript"></script> 

第 8 步 ， 保 存 后 ， 就 可 以 通过 Cookie 来 获取 当前 的 皮肤 了 。 如 果 Cookie 确实 存在 ， 则 将 当前 皮 
肤 设置 为 Cookie 记录 的 值 。 

Var cookie skin = $.cookie("MyCssSkin"): 

if(cookie skin) { | 

switchSkin( cookie_skin ): | 
} 人 
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| changeSkinjs 文件 的 完整 代码 请 参考 本 章 案例 源 代码 。 
| 第 9 步 ， 此 时 网 页 换 肤 功能 不 仅 能 正常 切换 ， 而 且 也 能 保存 到 Cookie 中 。 当 用 户 刷新 网 页 后 ， 
| 仍然 是 当前 选择 的 皮肤 ， 效 果 如 图 24.3 所 示 。 


P| S pyecahosuryskerindechr 


当前 应 用 皮肤 样式 
实惠 看 得 2 | 
图 24.3 网 页 换 肤 按钮 及 其 效果 





| 24 .4.3 “导航 效果 


新 建 JavaScript 文件 ， 保 存 为 navjs， 输 入 下 面 代码 : 


| $(function0{// 导 航 效果 

| S$("#hav li").hover(functionO{ 

| S(this).find(".jnNav").showO: 

| } fanctionO{ 
S(this).find(".jnNav").hideO: 

D: 

D 


| 在 上 面 代码 中 ， 使 用 $("#nav 1i") 选 择 id 为 nav 的 <li> 元 素 ， 然 后 为 它们 添加 hover 事件 。 在 hover 
,事件 的 第 一 个 函数 内 ,使 用 $(this).find(".jnNav") 找 到 <li> 元 素 内 部 class 为 jnNav 的 元 素 。 然 后 用 show0 


女装 ”男装 


鼠标 移 过 主 菜 


单 ， 则 弹出 二 级 





图 24.4 导航 菜单 交 百 效 果 
24.4.4 商品 分 类 热 销 效果 


为 了 完成 这 个 效果 ， 可 以 先 用 Dreamweaver 查看 模块 的 DOM 结构 ，HTML 代码 如 下 所 示 : 

<div id=-"jnCatalog"> 

<h2 title=" 商 品 分 类 "> 商品 分 类 </h2> 

<div class="jnCatainfo"> 

<h3> 推 荐 品牌 </h3> 

| <ul> 
| <li><a hre 全 "fmogo" > 耐克 </a></li> 
| -<li><a href="#nogo" class="promoted"> 阿 迪 达 斯 <Ja></li> 
| <li><a href="#ogo" > 达芙妮 <a></li> 
<li><a hre 人 "加 ogo" > 李宁 </a></i> 
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<li><a hre 仁 "#nogo" > 安踏 </a></li> 
<li><a hre 仁 "#nogo" > 奥康 </a></li> | 
<li><a hre 人 ="#nogo" class="promoted"> 骆 驼 </a></li> | 
<li><a hre 仁 "#nogo" > 特步 </a></li> | 
< 





在 结构 中 ， 发 现在 热 销 效果 的 元 素 上 包含 一 个 promoted 类 ， 通 过 这 个 类 ，JavaScript 会 自动 完成 
热 销 效果 。 
新 建 JavaScript 文件 ， 保 存 为 addhotjs， 然 后 输入 下 面 jQuery 代码 : | 
语 添加 hot 显示 */ 
S$(functionO{ 
$(".jnCatainfo .promoted").append('<s class="hot"></s>"): 
) 


| 
| 
此 时 ， 热 销 效果 如 图 24.5 所 示 。 | 
| 


首页 品牌 女装 男装 ”封包 配饰 





当 菜 单项 目 包含 class= 
"promoted" 后 ， 会 自动 呈现 | 
热 销 图 标 | 

| 


= | 


图 24.5 热 销 效 果 





24.4.5 ”产品 广告 效果 


在 实现 这 个 效果 之 前 ， 先 分 析 如 何 来 完成 这 个 效果 。 在 产品 广告 下 方 有 5 个 缩 略 文字 介绍 ， 它 们 
分 别 代表 5 张 广 告 图 ， 如 图 24.6 所 示 。 





当前 显示 的 广 


告 缩微 文字 和 
广告 图 





图 24.6 产品 广告 效果 | 
当 光 标 滑 过 文字 1 时 ， 需 要 显示 第 一 张 图 片 ， 当 光标 滑 过 文字 2 时 ， 需 要 显示 第 二 张 图 片 ; 依 此 | 
类 推 。 因 此 ， 如 果 能 正确 获取 到 当前 滑 过 的 文字 的 索引 值 ， 那 么 实现 效果 就 非常 简单 了 。 | 
新 建 JavaScript 文档 ， 保 存 为 adjs。 输 入 下 面 代码 : 
上 # 首页 大 屏 广告 效果 */ 
$(function QO { 
Var $imgrolls = $("#nImageroll div a"): 
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Simgrolls.css("opacity", "0.7"); 
var len = $imgrollslength: 
Var index = 0: 
var adTimer = pull: 
仿生 | S$imgrolls.mouseover(function O { 
we | index = Simgrolls.index(this): 


showImg(index): 
SS 


| // 滑 入 时 停止 动画 ， 滑 出 时 开始 动画 
S$(#jnlmageroll").hover(function O { 
if (adTimer) { 
clearInterval(adTimer): 


) 
}, function 0 { 
adTimer = setInterval(function O { 
showImg(index); 
index++; 
if (index — len) { index = 0; } 
}, 5000): 
}).trigger("mouseleave"): 


D) 

// 显 示 不 同 的 幻灯 片 

finction showImg(index) { 

| Var $rollobj = $("#jnImageroll"); 

| var $rolllist = Srollobj find("div a"): 

| var newhref = $rolllist.eq(index).attr("href"): 
S$("#]S imegWrap").attr("href", newhref) 

‘find("img").eq(index).stop(true, true) fadeIn().siblings() .fadeOut(): 

S$rolllist.removeClass("chos").css("opacity". "0.7") 

| .eq(index).addClass("chos").css("opacity". "1"); 

| } 

| 

在 上 面 代码 中 定义 了 一 个 showImg0 函 数 ， 然 后 给 函数 传递 了 一 个 参数 index，index 代表 当前 要 

| 显示 图 片 的 索引 。 

| 获取 当前 滑 过 的 <a> 元 素 ， 通 过 在 所 有 <a> 元 素 中 的 索引 可 以 使 用 jQuery 的 index0 方 法 获取 。 其 

| 中 ，.eq(0).mouseoverO 部 分 是 用 来 初始 化 的 ， 让 第 一 个 文字 高 亮 并 显示 第 一 张 图 片 。 

读者 也 可 以 修改 eq(0 方 法 中 的 数字 来 让 页 面 默认 显示 任意 一 个 广告 。 


24.4.6” 超 链接 提示 
本 节 设 计 主 页 右 侧 最 新 动态 模块 的 内 容 添加 超 链接 提示 。 标准 浏览 器 中 都 自 带 了 超 链接 提示 ,只 
需 在 超 链接 中 加 入 title 属性 就 可 以 了 。HTML 代码 如 下 所 示 : 
<a hre 伍 "#" title=" 提 示 信 息 "> 超 链接 </a> 
不 过 这 个 提示 效果 的 响应 速度 是 非常 缓慢 的 ， 考虑 到 良好 的 人 机 交互 , 需要 的 是 当 和 鼠标 移动 到 超 


链接 的 那 一 瞬间 就 出 现 提 示 。 这 时 就 需要 移 除 <a> 标 签 中 的 title 提示 效果 ， 自 己 动手 做 一 个 类 似 功能 
的 提示 。 
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【操作 步骤 】 
第 1 步 ， 在 页 面 上 添加 普通 超 链接 ， 并 定义 class="tooltip" 属 性 。HTML 代码 如 下 所 示 : 
<ul> 


<li><a hre 人 ="###1" class="tooltip" title="[ 活 动 ] 伊 伴 春 鞋 迎 春 大 促 ">[ 活 动 ] 伊 伴 春 鞋 迎春 大 促 </a></li> | 会 内 





第 2 步 ， 在 CSS 样式 表 中 定义 提示 框 的 基本 样式 。 | 


#tooltip { 
position: absolute; 
border: 1px solid #333; background: #f7f5d1: color: #333; 
padding: 1px; display: none; 
} 
第 3 步 ， 新 建 JavaScript 文档 ， 保 存 为 tooltip. js。 然 后 输入 下 面 代码 : 


上 # 超 链接 文字 提示 */ 
S$(function 0 { 

var x= 10; | 

Var y = 20; | 

| 

| 


$("a.tooltip").mouseover(function (e) { 
this.myTitle = this.title; 
this.title = ""; 


var tooltip = "<div id="tooltip>" + this.myTitle + "</div>"; // 创 建 div 元 素 

S$("body").append(tooltip): // 把 它 追加 到 文档 中 | 

$("#tooltip") | 
.css({ | 


"top": (e.pageY + y) + "px". 
"left": (e.pageX + X) + "px" 
}).show("fast"): // 设 置 x 坐标 和 y 坐标 ， 并 且 显示 
}).mouseout(function O { | 
this.title = this.myTitle; | 
$("#tooltip").remove(); // 移 除 | 
}).mousemove(function (e) { 
$("#tooltip") 
Css({ 
"top": (e.pageY + y) + "px", | 
"left": (e.pageX + x) + "px" | 
| 


DD: 
D: 
» | 
上 面 代码 的 设计 思路 如 下 : 
当 鼠 标 滑 入 超 链接 时 ， 先 创建 一 个 div 元 素 ，div 元 素 的 内 容 为 title 属性 的 值 ， 然 后 将 创建 的 元 | 


素 添 加 到 文档 中 ; 为 它 设置 x 坐标 和 y 坐标 ， 使 它 显示 在 鼠标 位 置 的 旁边 。 当 鼠标 滑 出 超 链 接 时 , 移 | 
除 div 元 素 。 

此 时 的 效果 有 两 个 问题 : 首先 是 当 鼠 标 滑 过 后 ，<a> 标 签 中 的 title 属性 的 提示 也 会 出 现 ， 其 次 是 
设置 x 坐标 和 y 坐标 的 问题 ,由 于 自制 的 提示 与 鼠标 的 距离 太 近 ， 有 时 候 会 引起 无 法 提示 的 问题 ( 鼠 
标 焦点 变化 引起 mouseout 事件 )。 


"515° 


名 A 从 入 门 到 精通 ( 微 课 精 编 版 ) 





| 为 了 移 除 <a> 标 签 中 自 带 的 tide 提示 功能 ， 需 要 进行 以 下 操作 : 
| 当 鼠 标 滑 入 时 ， 给 对 象 添加 一 个 新 属性 myTitle， 并 把 title 的 值 传 给 这 个 属性 ， 然 后 清空 属 
| 性 title 的 值 。 
会 内 | 当 鼠 标 滑 出 时 ， 再 把 对 象 的 myTitle 属性 的 值 又 赋 给 属性 tidle。 
~ 为 什么 当 鼠 标 移出 时 , 要 把 属性 值 又 传递 给 属性 title 呢 ? 因为 当 鼠 标 滑 出 时 ， 需 要 考虑 再 次 滑 入 
时 的 属性 title 值 ， 如 果 不 将 myTide 的 值 传递 给 title 属性 ， 当 再 次 滑 入 时 ，title 属性 值 就 为 空 了 。 
| 为 了 解决 第 二 个 问题 〈 自 制 的 提示 与 鼠标 的 距离 太 近 ， 有 时 候 会 引起 无 法 提示 的 问题 )， 需 要 重 
| 新 设置 提示 元 素 的 top 和 left 的 值 ， 并 为 top 增加 10px， 为 left 增加 20px。 
| 为 了 让 提示 信息 能 够 跟随 鼠标 移动 ， 还 需要 为 超 链 接 添加 一 个 mousemove 事件 ， 在 该 事件 函数 
| 中 不 断 更 新 提示 信息 框 的 坐标 位 置 ， 实 现 提示 框 能 够 跟随 鼠标 移动 。 
| 第 4 步 ， 在 浏览 器 中 预览 ， 可 以 看 到 如 图 24.7 所 示 的 提示 信息 框 效果 。 














最 新 动态 


[活动 ] 伊 件 春 鞋 迎春 大 促 
和 者 千百度 冬 靴 新品 火热 让 利 


sz] 活动 ] 千百度 和 革新 品 火 热 让 利 
[活动 ] 千百度 冬 革 新品 火 执 让利 


快速 显示 的 超 链 
接 提示 信息 









图 24.7 提示 信息 框 效果 


品牌 活动 横向 滚动 效果 





| 新 建 JavaSeript 文档 ， 保 存 为 imgslide js， 然 后 输入 下 面 代码 : 
| 
| 


店 品牌 活动 模块 横向 滚动 */ 
$(function | { 
$("#nBrandTab li a").click(function | { 
S$(this).parentO.addClass("chos").siblingsO.removeClass("chos"): 
Var idx = $("#nBrandTab li a").index(this): 
showBrandList(idx): 
Tetum false: 
}).eq(0).clickO: 
Dp: 
| // 显 示 不 同 的 模块 
| function showBrandList(index) { 
| var $rollobj = $("##nBrandList"): 
| var rollWidth = $rollobi.find("li").outerWidth(): 
rollWidth=rollWidth * 4: /一 个 版 面 的 宽度 
Srollobj.stop(true. false).animate({ left: -rollWidth * index }. 1000): 


| 

| 

”在 网 页 中 应 用 该 动画 效果 , 当 单 击 品牌 活动 右上 角 的 分 类 链接 时 就 会 以 横向 滚动 的 方式 显示 相关 
| 内容， 效果 如 图 24.8 所 示 。 
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当 单 击 右上 角 的 分 类 链接 时 ， 下 面 
品牌 列表 会 水 平 横向 滚动 显示 














图 24.8 横向 滚动 效果 
24.4.8 ”光标 滑 过 产品 列表 效果 


本 节 设计 主页 右 侧 下 部 光标 滑 过 产品 列表 的 动态 效果 。 当 光标 滑 过 产品 时 会 添加 一 个 半 透 明 的 遮 
罩 层 并 显示 一 个 放大 镜 图 标 ， 效 果 如 图 24.9 所 示 。 










抽风 动 有 本 克 
= 从 nN 站 当 光 标 移动 到 产品 上 
》 2 i 时 ， 会 显示 遮 单 层 ， 并 
> > 人 弹出 一 个 放大 按钮 


耐克 同 过 运 所 李宁 安 路 
图 24.9 添加 高 亮 效果 


为 了 完成 这 个 效果 ， 可 以 为 产品 列表 中 每 个 产品 都 创建 一 个 span 元 素 ， 设 计 它 们 的 高 度 和 宽度 
与 产品 图 片 高 度 和 宽度 都 相同 ， 然 后 为 它们 设置 定位 方式 、 上 边 距 和 左边 距 ， 并 使 之 处 于 图 片上 方 。 

【操作 步骤 】 

第 1 步 ， 新 建 JavaScript 文档 ， 保 存 为 imgHoverjs， 输 入 下 面 代码 : 


族 滑 过 图 片 出 现 放大 镜 效果 */ 
S$(function O { 
$("#nBrandList li").each(function (index) { 
var Simg = S(this) find("img"): 
Var img_w = $img.width(): 
var img h= $img.heightO|; | 
var spanHtml = spen style="position:absolute:top:0:left:Spx:width:' + img w + 'px:height: + img h+ | 
‘px:" class="imageMask"></span>' | 
S$(spanHtml). appendTo(this); | 
D | 
$("#nBrandList").delegate(".imageMask". "hover' finction 0 { 
S(this) .toggleClass("imageOver"): 
D: 
D 
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第 2 步 ， 通 过 控制 class 来 达到 显示 光标 滑 过 的 效果 。 首 先 在 CSS 中 添加 一 组 样式 ， 代 码 如 下 


background: url(. /images/zoom.gif) no-repeat 50% 5096: 
filter: alpha(opacity=60): 
opacity: 0.6; 

} 

第 3 步 ， 当 光标 滑 入 class 为 imageMask 的 元 素 时 ， 为 它 添加 imageOver 样式 使 产品 图 片 出 现 放 
大 镜 效 果 ， 当 光标 滑 出 元 素 时 ， 移 除 imageOver 样式 。 

第 4 步 ， 当 光标 滑 入 图 片 时 ， 就 可 以 出 现 放大 镜 了 。 注 意 ， 这 里 使 用 的 是 live0 方 法 绑 定 事件 ， 
而 不 是 使 用 bind() 方 法 。 由 于 imageMask 元 素 是 被 页 面 加 载 完 后 动态 创建 的 ， 如 果 用 普通 的 方式 绑 定 
事件 ， 那 么 不 会 生效 。 而 live0 方 法 有 个 特性 ， 就 是 即使 是 后 来 创建 的 元 素 ， 用 它 绑 定 的 事件 一 直 会 
生效 。 


24.5 设计 详细 页 交互 行为 
在 详细 页 〈detailhtml) 上 将 完成 如 下 功能 。 


24.5.1 图 片 放 大 镜 效果 
当 用 户 移动 光标 到 产品 图 片上 时 会 放大 产品 局 部 区 域 ,以 方便 用 户 查看 产品 细节 。 这 种 放大 镜 效 


果 在 网 店 中 是 常用 特效 ， 演 示 效 果 如 图 24.10 所 示 。 








忆 观 者 滞 电 图 上 


24.10 产品 图 片 放 大 效果 





如 果 亲 自动 手 实现 这 个 效果 ， 或 许 比较 麻烦 ， 不 过 可 以 借助 插件 来 快速 实现 。 插 件 是 jQuery 的 


| 特色 之 一 ,访问 jQuery 官网 查找 一 下 ， 看 是 否 有 类 似 的 插件 ， 本 例 使 用 的 是 名 为 jqzoom 的 插件 ， 它 
很 


适合 本 例 设计 需求 。 
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【操作 步骤】 
第 1 步 ， 在 官网 找到 jqueryjqzoomjs， 并 下 载 到 本 地 ， 然 后 在 详细 页 中 把 它 引入 到 网 页 中 , 代码 | 
如 下 所 示 : | 
<!-- 产品 缩 略 图 插件 -> 所 
<ScTipt src="scripts/jquery.iqzoom.is" type="text/javascript"></script> | ES 
第 2 步 ， 新 建 JavaScript 文件 ， 保 存 为 use_jqzoom.js。 查 看 官方 网 站 的 API 使 用 说 明 ， 可 以 使 用 
如 下 代码 调用 jqzoom。 | 
$(function 0 {/* 使 用 jqzoom*/ 
$(jqzoom’)jqzoom({ 
zoomType: 'standard', 
lens: true, | 
PpreloadImages: false, | 
alwaysOn: false, | 
zoomWidth: 340, | 
zoomHeight: 340, 
xOffset: 10, 
yOffset: 0, | 
position: ‘right' | 
| 
| 





D); 
六: 
第 3 步 ， 将 上 面 代码 放 入 use_jqzoom.js 文件 里 ， 然 后 在 网 页 文档 中 引入 。 
<script src="scripts/use_jqzoom.js" type="text/javascript"></script> 
第 4 步 , 在 相应 的 HTML 代码 中 添加 属性 。 为 <a> 标 签 添加 href 属性 ,设置 它 的 值 指向 产品 对 应 
的 rel 属 性 ， 它 是 小 图 片 切 换 为 大 图 片 的 “ 钧 子 ”， 代码 如 下 所 示 : 
<a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel="gall' title=" 免 谣 高 支 棉 条 纹 衬衣 " > | 
<img src="images/pro_img/blue_one_ smalljpg” title=" 免 纪 高 支 棉 条 纹 衬衣 ”alt=" 免 透 高 支 棉 条 纹 衬衣 ” | 
id="bigImg" /> | 
</a> | 
第 5 步 ， 最 后 ， 不 要 忘记 添加 jqzoom 所 提供 的 样式 。 此 时 ， 运 行 代码 后 ， 产 品 图 片 的 放大 效果 | 
就 显示 出 来 了 。 


24.5.2 图片 遮 罩 效果 


下 面 设计 产品 图 片 的 遮 四 效果 ， 当 单 击 “ 观 看 清除 图 片 ” 按 钮 时 ， 需 要 显示 如 图 24.11 所 示 的 大 | 
图 ， 为 此 需要 启动 遮 罩 层 ， 和 遮盖 其 他 内 容 显 示 。 | 
本 效果 也 应 用 了 jQuery 插件 ， 在 官方 网 站 搜索 可 以 找到 名 为 thickbox 的 插件 ， 是 一 款 非常 适合 | 
的 效果 。 | 
【操作 步骤 】 | 
第 1 步 ， 下 载 jquery.thickboxjs 插件 文件 。 
第 2 步 ， 按 照 官方 网 站 的 API 说 明 ， 引 入 相应 的 jQuery 和 CSS 文件 ， 代 码 如 下 所 示 : 
<!-- 谈 蛙 图片 -> 
‘<script src="scripts/jquery.thickbox.js" type="text/javascript"></script> 
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<link rel="stylesheet" href="styles/thickbox.css" type="text/css" /> 








© BE hapy/localhosb myste/deral html P- BC|Slan 








ee 半 透 明 的 遮 单 层 




















高 亮 显示 的 大 图 






































24.11 产品 图 片 遮 日 效果 

第 3 步 ， 为 需要 应 用 该 效果 的 超 链接 元 素 添加 class="thickbox" 和 title 属性 ， 它 的 href 值 代表 着 
需要 弹出 的 图 片 。 代 码 如 下 所 示 : 

<a title=" 介 绍 文字 " id="thickImg" href="images/pro_img/blue_one_big.jpe" class="thickbox"> 

<img src="images/look.gif" alt=" 点 击 看 大 图 " 广 

</a> 

第 4 步 ， 此 时 ， 当 单 击 “ 观 看 清晰 图 片 ”按钮 时 就 能 够 显示 遮 单 层 效果 了 。 

在 上 面 两 个 效果 中 ， 并 没有 花费 太 多 的 时 间 做 出 来 ， 可 见 合理 利用 成 熟 的 jQuery 插件 能 够 极 大 
地 提高 开发 效率 。 


24.5.3 ”小 图 切换 大 图 


本 效果 设计 当 单 击 产品 小 图 片 时 ， 上 面 对 应 的 大 图 片 会 自动 切换 , 并 且 大 图 片 的 放大 镜 效果 和 和 遮 
畦 效果 也 能 够 同时 切换 。 

【操作 步骤 】 

第 1 步 ， 先 实现 第 一 个 效果 : 单 击 小 图 切换 大 图 。 在 图 片 放大 镜 的 jqroom 例子 中 ， 我 们 自 定义 
一 个 rel 属性 ， 它 的 值 是 gall， 它 是 小 图 切换 大 图 的 “钩子 ”HTML 代码 如 下 所 示 : 

<li class="imgList_blue"> 
| <a href=javascriptvoid(0): rel=" {gallery: ‘gall'. smallimage: ‘images/pro img/blue one smalljpg'largeimage: 
‘images/pro_ img/blue_one big.jpg'}"> 
| <img src='images/pro_img/blue_one.jpg alt=""/> 
</a> 























在 上 面 代 码 中 ， 为 超 链接 元 素 定义 了 一 个 rel 属性 ， 它 的 值 又 定义 了 3 个 属性 ， 分 别 是 gallery、 
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smallimage 和 largeimage。 其 作用 就 是 单 击 小 图 时 ， 首 先 通 过 gallery 来 找到 相应 的 元 素 ， 然 后 为 元 素 | 
设置 smallimage 和 largeimage。 | 
第 2 步 ， 此 时 单 击 小 图 可 以 切换 大 图 ， 但 单 击 “ 观 看 清晰 图 片 ”按钮 时 ， 弹 出 的 大 图 并 未 更 新 。 
接 下 来 就 来 实现 这 个 效果 。 | 加 会 内 
实现 这 个 效果 并 不 难 ， 但 为 了 使 程序 更 加 简单 ， 需 要 为 图 片 使 用 基于 某 种 规则 的 命名 。 例如 , 为 个 
小 图 片 命 名 为 blue_ one_ smalljpg， 为 大 图 片 命名 为 blue_one_ big. jpg， 这 样 就 可 以 很 容易 地 根据 单 _ 轩 N07 已 
击 的 图 片 (blue_onejpg) 来 获取 相应 的 大 图 片 和 小 图 片 。 | 
第 3 步 ， 新 建 JavaScript 文档 ， 保 存 为 switchImgjs， 然 后 输入 下 面 代码 : | 
让 点 击 左 侧 产 品 小 图 片 切换 大 图 */ | 
3(function O { 
S$("#jnPproitem ul imgList li a”).bind("click", function 0 { | 
Var imgSrc = $(this).find("img").attr("sre"): | 
var i = imgSre.lastIndexOf("."); | 
var unit = imgSre.substring(i); | 
imgSrc = imgSrc.substring(0, i); | 
| 
| 
| 
| 
| 








VarimgSrc_ big=imgSrc+ ”big + unit 
S("#thickImg").attr("href", imgSrc_big): 

py 
通过 lastIndexOf0 方 法 获取 到 图 片 文 件 名 中 最 后 一 个 “.” 的 位 置 ， 然 后 在 substring() 方 法 中 使 用 | 

该 位 置 来 分 割 文件 名 ， 得 到 blue_one 和 .jpg 两 部 分 ， 最 后 通过 拼接 _big 得 到 相应 的 大 图 片 ， 将 它们 赋 | | 
给 id 为 thickImg 的 元 素 。 | 
第 4 步 ， 应 用 代码 后 ， 当 单 击 产品 小 图 片 时 ， 不 仅 图 片 能 正常 切换 ， 而 且 它 们 所 对 应 的 放大 镜 效 | 

果 和 遮 四 层 效果 都 能 正常 显示 出 当前 显示 的 产品 的 图 片 ， 效 果 如 图 24.12 所 示 。 | 





单 击 小 图 ， 上 面 大 
图 会 自动 切换 





图 24.12 产品 图 片 遮 罩 效 果 





24.5.4 选项 卡 
在 产品 属性 介绍 内 容 时 使 用 了 Tab 选项 卡 ， 这 也 是 网 页 中 经 常 应 用 的 形式 。 实 际 上 ,制作 选项 卡 | 视频 讲 
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的 原理 比较 简单 ， 即 通过 隐 若 和 显示 来 切换 不 同 的 内 容 。 下 面 将 详细 介绍 实现 选项 卡 的 过 程 。 
| 【操作 步骤 】 
| 


| 第 1 步 ， 首 先 构建 HTML 结构 ， 代 码 如 下 所 示 : 
全 | 


| <div class="tab menu"> 


| <liclass="selected"> 产 品 属性 </li> 
| <L> 产 品 尺 码 表 <li> 

| <1i> 产 品 介绍 <fi> 

| </ul> 

| </div> 

| <div class="tab_box"> 

| <div>*…** </div> 

| <div class="hide">*…**</div> 

| <div class= hide">……</div> 

| </div> 

| </div> 

| 应 用 样式 后 ， 呈 现 效果 如 图 24.13 所 示 。 选 项 卡 默认 第 一 个 选项 被 选中 ， 然 后 下 面 区 域 显 示 相 应 





| 的 内 容 ， 当 单 击 “ 产 品 尺 码 表 ” 选 项 卡 时 ,“ 产 品 尺码 表 ” 选 项 卡 将 处 于 高 亮 状态 ， 同 时 下 面 的 内 容 
| 也 切换 成 “产品 尺码 表 ” 了 ， 当 单 击 “ 产 品 介绍 ”选项 卡 时 ， 也 显示 相应 的 内 容 。 
| 第 2 步 ， 新 建 JavaSeript 文档 ， 保 存 为 tabjs， 然 后 输入 下 面 代码 
| /TD 选项 卡 标签 
| Snetion01 
var $div_ li =$("div.tab_menu ul 1i"); 
Sdiv li.click(function){ 





去 掉 其 他 同辈 上 元 素 的 高 亮 。 

第 3 步 ， 单 击 选项 卡 后， 当前 元素 处 于 高 亮 状 态 ， 而 其 他 的 二 元 素 已 去 掉 了 高 亮 状 态 。 但 选项 
， 卡 下 面 的 内 容 还 没 被 切换 ， 因 此 需要 将 下 面 的 内 容 也 对 应 切换 ， 效 果 如 图 24.14 所 示 。 

第 4 步 ， 从 选项 卡 的 基本 结构 可 以 知道 ， 每 个 下 元 素 分 别 对 应 一 个 div 区 域 。 因 此 ， 可 以 根据 当 
前 单 击 的 二 元 素 在 所 有 上 元 素 中 的 索引 ， 然 后 通过 索引 来 显示 对 应 的 区 域 。 





S(this).addClass("selected") // 当 前 五 元 素 高 亮 
.siblings(.removeClass("selected"); // 去 掉 其 他 同辈 fi 元素 的 高 亮 
varindex = S$div liindex(this): // 获 取 当前 单 击 的 元 素 在 全 部 二 元素 中 的 索引 
S$("div.tab_box > div") // 选 取 子 节点 。 不 选取 子 节点 的 话 ， 会 引起 错误 
.eq(index).showO // 显 示 与 二 元 素 对 应 的 div 元 素 
.siblings().hideO: /隐藏 其 他 几 个 同辈 的 div 元 素 
| .hover(functionO{ 
| S(this).addClass("hover"): 
| },functionO{ 
| S$(this).removeClass("hover"): 
| D 
ES 
| 在 上 面 代码 中 ,首先 为 上 元素 绑 定 单 击 事件 ， 绑 定 事件 后 ， 需 要 将 当前 单 击 的 元素 高 亮 ; 然后 
下 
| 
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| 才 风 汪 百年 有 的 经 各 全 档 牛 来 让 面 科 ， 训 过 法 大约 大: 

理 技 术 ， 使 画幅 呈 折 性能 更 上 一 后 。 延续 简 汐 、 合适 、 
jl 设 计 理念 ， 竺 推出 久 汤 、 呆 当时 长 





图 24.13 选项 卡 效果 





安 提示 : 在 上 面 的 代码 中 ， 要 注意 $("divtab_box > div") 这 个 子 选择 器 ， 如 果 用 $("divitab_box div") 
选择 器 ， 当 子 节点 里 再 包含 div 元 素 的 时 候 ， 就 会 引起 错误 ， 因 此 获取 当前 选项 卡 下 的 子 | 
节点 才 是 这 个 例子 所 需要 的 。 | 本 


24.5.5 ”产品 颜色 切换 


| 
本 节 来 设计 右 侧 产 品 颜色 切换 , 与 单 击 左 侧 产品 小 图 片 切换 为 大 图 片 类 似 , 不 过 还 需要 多 做 几 步 ， | 
即 显示 当前 所 选中 的 颜色 和 显示 相应 产品 列表 ， 演 示 效 果 如 图 24.15 所 示 。 | 









免 泛 高 支 棉 条 纹 定安 
全 新 精品 高 支 棉 守 | 单 击 颜色 块 ， 可 


\ 好 to 以 自动 切换 大 图 
大 图 从 站 : 39 和 小 图 颜色 
q | ,Ne 


24.15 ”产品 颜色 切换 效果 


【操作 步骤 】 
第 1 步 ， 新 建 JavaScript 文档 ， 保 存 为 switchColorjs， 然 后 输入 下 面 代码 : | 
1 
片 衣服 颜色 切换 */ | 
S$(function O { | 


S$(".color_change ul li img").click(function O { 
S$(this).addClass("hover").parent().siblings().find("img").removeClass("hover"): | 
var imgSre = $(this).attr("sre"): | 
var i= imgSrc.lastIndexOf("."): | 
var unit = imgSre.substring(i): | 
imgSrc= imgSrc.substring(0. D): 
var imgSre small=imgSrc +" one small" + unit 
Var imgSrc big = imgSrc +"_ one big" + unit: 

S("#bigImg").attr({ "sre": imgSre_small }); | 
SC#thickImg ).attr( href .imgSrc_big)- | 
Var alt = $(this).attr("alt"): LL 
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$(".color change strong").text(albD: 
var newImgSrc = imgSrc replace("images/pro_ img/", ""): 
$("#nProitem .imgList 1i").hideO; 
$("#nProitem .imgList").find(".imgList "+ newImgSrc).showO:; 


鲜 | | )》: 


| DD; 


第 2 步 ， 运 行 效果 后 ， 产 品 颜色 可 以 正常 切换 了 ， 演 示 效 果 如 图 24.15 所 示 。 
| 第 3 步 ,但 会 发 现 一 个 问题 如 果 不 手 动 去 单 击 缩 略图 ， 那么 放大 镜 效 果 显 示 的 图 片 还 是 原来 的 
| 图 片 ， 解 决 方法 很 简单 ， 只 要 触发 获取 的 元 素 的 单 击 事件 即 可 。 在 上 面 代码 尾部 添加 如 下 一 行 代码 : 


/解决 问题 :切换 颜色 后 ， 放 大 图 片 还 是 显示 原来 的 图 片 
$("##nProitem imgList") find(" imgList "+newImgSre).eq(0) .find("a clickO: 


24.5.6 ”产品 尺寸 切换 
本 节 设计 右 侧 产 品 尺 寸 切换 效果 ， 在 实现 该 功能 之 前 ， 先 看 一 下 效果 ， 如 图 24.16 所 示 。 








显示 当前 选中 的 产品 尺寸 


| 
尺 十 SL 
s | 


| 

| 图 24.16 产品 尺寸 切换 效果 

| 

| 【操作 步骤 】 

第 1 步 ， 首 先 设 计 DOM 结构 ， 代 码 如 下 : 

<li class="pro_size"> <span> 尺 &#12288:&#12288: 寸 ，</span> <strong> 未 选择 </strong> 
<ul> 


| 通过 观察 产品 尺寸 的 DOM 结构 , 可 以 非常 清晰 地 知道 元 素 之 间 的 关系 , 然后 利用 jQuery 强大 的 
| DOM 操作 功能 进行 设计 。 
| 第 2 步 ， 新 建 JavaScript 文档 ， 保 存 为 sizeAndprice.js， 然 后 输入 下 面 代码 : 
| A 农 服 尺寸 选择 */ 
| $(function O { 

$(".pro size li").click(function 0 { 

S(this).addClass("cur").siblingsO .removeClass("cur"): 

| S(this).parents("ul").siblings("strong").text($(this).textO): 
| D 
| i 
| 第 3 步 ， 应 用 jQuery 上 面 代码 ， 这 样 用 户 就 可 以 通过 单 击 尺寸 来 进行 实时 产品 尺寸 的 选择 。 
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24.5.7 ”产品 数量 和 价格 联动 


下 面 设计 右 侧 产品 数量 和 价格 联动 效果 。 这 个 功能 非常 简单 ， 只 要 能 够 正确 获取 单价 和 数量 , 然 | 
后 获取 它们 的 积 ， 最 后 把 积 赋值 给 相应 的 元 素 即 可 。 | 


拟 注意 : 为 了 防止 元 素 刷 新 后 依旧 保持 原来 的 值 而 引起 的 价格 没有 联动 问题 ,需要 在 页 面 刚 加 载 时 ， | 
为 元 素 绑 定 change 事件 之 后 立即 触发 change 事件 。 


打开 sizeAndpricejs 文档 ， 输 入 如 下 代码 : | 


/数量 和 价格 联动 类 
Sonction0{ 
Var $span = $(".pro_price strong"): 
Var price = $span.text(): 
$("#num sort").change(functionO{ 
var num = $(this).valO; 
Var amount = num * price: 
$span.text( amount ); 
D.changeO): 
了) 


24.5.8 产品 评分 的 效果 


本 节 设 计 右 侧 产 品评 分 效果 。 
【操作 步骤 】 
第 1 步 ， 在 开始 实现 该 效果 之 前 先 设计 静态 的 HTML 结构 ， 代 码 如 下 所 示 : 
<div class="pro_rating"> 给 商品 评分 : 
<ul class="rating nostar"> 
<li class="one"><a title="1 分 " hre 伍 "#">1</a></li> 
<li class="two"><a title="2 分 " hre 仁 "#">2</a></li> | 
<li class="three"><a title="3 分 " hre 仁 "#">3</a></li> | 
<li class="four"><a title="4 分 "href= pr>4</a><hi> | 
<li class="five"><a title="$ 分 " hre 仁 "#">5</a></li> 
</ul> 
</div> 
通过 改变 <ul> 标 签 的 class 属性 就 能 实现 评分 效果 ， 根 据 这 个 原理 ， 可 以 编写 脚本 。 
第 2 步 ， 新 建 JavaScript 文档 ， 保 存 为 starjs， 然 后 输入 下 面 代 码 : 


让 商品 评分 效果 */ 
S$(function | { 
// 通 过 修改 样式 来 显示 不 同 的 星 级 | 
$Cnulrating li a").click(function | { | 
var title = $(this).attr("title"): | 
alert(" 您 给 此 商品 的 评分 是 : "+title): 
Var cl = $(this).parent|.attr("class"): 
$(this).parentO.parentO.IemoveClassO.addClass("rating " + cl+ "star”): 
S(this).blur0:// 去 掉 超 链接 的 虚线 框 
Teturn false: 














525 


ge 2 A wm 有 汉 芋 通 (项 名 本 二 到 ) 


| ) 

| Bs 

| 第 3 步 ， 运 行 效果 ， 当 单 击 灰色 五 角 星 时 ， 可 以 看 a 
TT | 到 评分 等 级 ， 同 时 会 变色 显示 当前 评分 情况 ， 演 示 效 果 人 条 
人 一 如 图 24.17 所 示 。 be 


人 5.9 模 态 对 语 杠 图 24.17 选项 卡 切换 效果 


下 面 设计 右 侧 产 品 的 购物 车 功能 。 当 用 户 选 择 购买 该 产品 时 ， 表 明 要 把 产品 放 入 购物 车 ， 这 一 
步 只 需要 将 用 户 选择 产品 的 名 称 、 尺 寸 、 颜 色 、 数 量 和 总 价 告诉 用 户 ， 以 便 用 户 进行 确认 ， 是 否 选 
正确 。 

【操作 步骤 】 

第 1 步 ， 新 建 JavaScript 文档 ， 保 存 为 finishjs， 然 后 输入 下 面 代 码 : 


* 最 终 购买 输出 */ 
S$(function O { 
| Var $product = $(".jnProDetail"): 
| S$("#cart a").click(function (e) { 
| Var pro_name = $product.find("h4:first").textO; 
Var pro_size = $product.find(".pro_size strong").textO; 
Var pro_color = $(".color_change Strong").textO: 
Var pro_num = S$product.find("#num sort").valO: 
| Var pro_price = $product.find(".pro_price strong").text(); 
| var dialog = "感谢 您 的 购买 。<div style='font-size:12px:font-weight:400:> 您 购买 的 产品 是 : 
| 


| 本 














"尺寸 是 : "+pro_size+"; "二 
"颜色 是 : "+ pro_color+ "; "十 
"数量 是 : "+ pro_num + "; "十 
| "总 价 是 : "+ pro_price + "元 。</div>"; 
| $("#nDialogContent").html(dialog): 
| $C#basic-dialog-ok).modal0: 
Tetum false:// 避 免 页 面 跳 转 
D: 
D 


| 
| 第 2 步 ， 应 用 该 特效 ， 演 示 效 果 如 图 24.18 所 示 。 
| 





: SL ; 颜色 是 : 蓝 白 ; 数量 














图 24.18 放 入 购物 车 提示 效果 
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24.6 扫 码 实战 


本 节 为 线 上 实战 延伸 部 分 ， 为 感 兴趣 、 有 余力 的 读者 再 提供 3 个 综合 案例 ， 从 不 同 侧面 展示 | 入 
JavaScript 的 应 用 ， 和 希望 通过 反复 实战 演示 加 深 对 JavaScript 的 理解 。 


24.6.1 综合 实战 : 设计 专题 页 


本 综合 实例 模仿 Adobe 设计 风格 ， 并 借用 Adobe 网 站 部 分 页 面 信息 ， 重 设 
结构 ， 优 化 代码 ， 借 助 JavaScripttjQuery 技术 设计 了 页 面 的 收缩 面板 、 下 拉 菜 单 
和 移动 信息 等 页 面 动 态 效果 。 详 细 说 明 请 扫 码 阅读 。 


24.6.2 ”综合 实战 : 设计 电子 相册 


电子 相册 是 Web 应 用 的 一 种 形式 ， 其 核心 功能 就 是 对 照片 进行 网 络 化 编辑 、 
存储 、 管 理 和 浏览 。 本 综合 案例 设计 简单 , 主要 功能 包括 照片 的 分 类 组 织 和 浏览 。 
整个 实例 以 HTML+CSS+JavaScripttjQuery+XML 技术 混合 进行 开发 。 遵循 结构 、 
表现 、 逻 辑 和 数据 完全 分 离 的 原则 进行 设计 。 详 细 说 明 请 扫 码 阅读 。 


24.6.3 ”综合 实战 : 设计 在 线 记 事 本 
本 综合 案例 从 零 起 步 讲解 如 何 创建 一 个 个 性 十 足 的 网 络 记事 本 网 站 , 并 使 用 
jQuery 改善 数据 显示 ， 提 升 用 户 体验 。 通 过 本 案例 的 实践 操作 帮助 读者 认识 到 


JavaScript 和 jQuery 在 网 站 开发 中 的 作用 ， 同 时 还 将 介绍 开发 一 个 网 站 的 基本 
流程 和 方法 ， 其 中 涉及 大 量 的 HTML 和 CSS 知识 。 详 细 说 明 请 扫 码 阅读 。 





24.7 在 线 练 司 


通过 综合 案例 来 提高 初学 者 对 HIML5、CSS3 和 JavaScript 的 实战 能 力 ， 以 及 在 实际 应 用 中 的 灵 
活 处 理 能 力 。 
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